title: CSS changes unexpectedly when I open IE Developer Tools
body: <p>I am currently testing a site on IE8 (running on a Virtual Machine). </p>
  
  <p>The site uses some background images inside :before and :after elements, which are inside a media query:</p>
  
  <pre><code>@media (min-width: 980px) {
  
      .box:after {
          ...
          background: url('../images/assets/home-create-background.png') bottom right no-repeat;
          ...
      }
  }
  </code></pre>
  
  <p>I'm using <a href="https://github.com/scottjehl/Respond" rel="nofollow">respond.js</a> to provide support for media queries on IE8. 
  The rules inside the media query are applied as soon as the page loads (ie: respond.js is actually working). However, this images are not displayed.</p>
  
  <p>The funny thing:  <strong>if I open IE Developer Tools (eg. pressing F12), the images are suddenly displayed.</strong></p>
  
  <p><strong>Anyone has experienced something similar?
  Do you guys have any idea or direction to explore?</strong></p>
  
  <hr>
  
  <p><strong>Edit:</strong>
  I was finally able to fix this problem adding content to the :after pseudo-element (I was already applying this rule, but not inside the media query and, for some reason, it wasn't applied on IE)</p>
  
  <pre><code>    .box:after {
          ...
          background: url('../images/assets/home-create-background.png') bottom right no-repeat;
          content: " ";
          ...
      }
  </code></pre>
  
  <p>In any case, I believe it's interesting to know why the layout was changing when I opened the Dev Tools...</p>