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

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

通过使伪元素更具体，确保应用 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;
}

css 完成的之字形边框在 IE 中不工作

Zigzag border done by css not working in IE

css

internet-explorer