CSS :before and :after are not working in IE8

Question

使用 :before 和 :after 创建一个右下角带有三 Angular 形的 div 容器，以创建带有白色边框的橙色三 Angular 形。在 FF 和 Chrome 中运行良好。在 IE8 中不工作。尝试调整 z-index 和其他属性，但无法弄清楚这里出了什么问题。感谢您的帮助。

 .homepage-banner-main:after { 
     content: " ";
     position: absolute;
     z-index: 100;
     bottom: 0px;
     right:5px;
     border-top: 100px solid transparent;
     border-bottom: 0px solid transparent; 
     border-right:100px solid #e66c23; 
     zoom:1;
 }

 .homepage-banner-main:before { 
     content: " ";
     position: absolute;
     z-index: 100;
     bottom: 0px;
     right:5px;
     border-top: 110px solid transparent;
     border-bottom: 0px solid transparent; 
     border-right:110px solid white; 
     zoom:1; 
 }

      <div class="homepage-banner-main" id="banner-1" >
          <img src="http://fillmurray.com/g/710/400" >
      </div>

Answer 1

可能有很多原因。在我的脑海中，你能检查一下吗:

1. 您的页面未在 Quirks 模式下运行。
2. 您的页面正在通过 HTML 验证(转到 W3C Validator 进行快速检查。)