Question

使用：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>

Answer 1

可能有很多原因。在我的头脑中，你能检查一下：

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

Answer 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"/>

css：before和：after在IE8中不起作用

2 个答案: