title: Issues with negative z-index in IE8
body: <p>I am using two pseudo elements to create a banner effect on a div, like so:</p>
  
  <pre><code>div { position: relative; width: 200px; background-color: #999; }
  div:before, div:after { content: ""; width: 10px; height: 0; display: block; position: absolute; z-index: -1; top: 10px; border-top: 10px solid #666; border-bottom: 10px solid #666; }
  div:before { right: -20px; border-right: 10px solid transparent; border-left: 10px solid #333; }
  div:after { left: -20px; border-left: 10px solid transparent; border-right: 10px solid #333; }
  </code></pre>
  
  <p>It works fine in FF, Chrome, Safari &amp; IE9, but no luck with IE8. The two elements with z-index of -1 show above parent. Is there any way to get this to work?</p>