css :before 和 :after 在 IE8 中不起作用答案

【问题标题】：css :before and :after are not working in IE8css :before 和 :after 在 IE8 中不起作用
【发布时间】：2014-10-08 08:43:51
【问题描述】：

使用 :before 和 :after 在右下角构建一个带有三角形的 div 容器，以创建带有白色边框的橙色三角形。在 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>

【问题讨论】：

你能取悦你的整个 DOCTYPE 吗？

标签： css internet-explorer-8 pseudo-element

【解决方案1】：

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

您的页面未在 Quirks 模式下运行。
您的页面正在通过 HTML 验证（转至 W3C Validator 进行快速检查。）

【讨论】：

这里是头部。不在怪癖模式下。将检查验证器。
签出验证器并修复了所有问题。仍然没有在图像顶部显示三角形。

【解决方案2】：

确保在您的标题中遵循以下内容

  <!DOCTYPE html>

确保您也关闭了元数据。 <meta ------- />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

类似

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

【讨论】：