css - 由 css 完成的之字形边框在 IE 中不起作用

Question

在我的clients site我正在使用锯齿形 css 边框(出于速度原因，我想避免使用图像 - 我正在使用不同的颜色等等)。

我的版本在 Chrome 和 Firefox(使用 Windows)中运行良好，但在 Internet Explorer 中运行不佳。我在 windws 上使用 IE 11 但无法正常工作。而且我不知道如何修复它，我什至添加了 -webkit 前缀但什么也没有。有没有人可以帮助我，好吗？

我的灵感来自 this site它似乎在 IE 11 中工作，但我不知道我的情况有什么不同。

div.zigzag > .container {
  padding-bottom: 40px;
  padding-top: 20px;
}
.zigzag {
  position: relative;
}
.zigzag:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  width: 100%;
  height: 10px;
}
.zigzag:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 10px;
}
/* blue */

.blue {
  background: #2c7892;
  color: #fff;
}
.zigzag.blue:before {
  background: linear-gradient(45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%);
  background: -webkit-linear-gradient(45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%), -webkit-linear-gradient(-45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%);
  background-size: 10px 20px;
}
.zigzag.blue:after {
  background: linear-gradient(45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%), linear-gradient(-45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%);
  background: -webkit-linear-gradient(45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%), -webkit-linear-gradient(-45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%);
  background-size: 10px 20px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row clearfix zigzag blue">
  <div class="container">
    <div class="col-md-12 column">
      Some Text Here.
    </div>
  </div>
</div>

Answer 1

问题是由继承自 bootstraps clearfix 伪元素的 display: table 属性引起的。

通过使伪元素更具体，确保应用 display: block 属性。最简单的方法是在 .zigzag:before 和 .zigag:after 之前附加“div”:

div.zigzag:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  width: 100%;
  height: 10px;
}
div.zigzag:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 10px;
}