Question

在我的clients site我使用曲折的css边框（因为我想避免使用图像的原因 - 我使用不同的颜色等等）。

我的版本在Chrome和Firefox（使用Windows）中运行正常，但在Internet Explorer中却没有。我在windws使用IE 11而不工作。而且我不知道如何修复它，我甚至添加了-webkit前缀而没有任何内容。有人可以帮帮我吗？

我受到this site的启发，似乎在IE 11中工作，但我不知道在我的情况下有什么不同。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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;
}

由css完成的Zigzag边界不在IE中工作

1 个答案: