使用线性渐变CSS将html Div除以12列

Question

我想使用CSS linear-grediant将Div分成12个相等的列。 IT需要在IE，Chrome和FF上运行

我在IE浏览器和Chrome浏览器上面临问题。

1. Chrome浏览器在窗口调整大小的12列后显示一些额外空间。
2. IE如果使用background-repeat，则不显示窗口上的网格线大小：圆形和窗口大小小于900像素
3. 如果用户background-repeat：space，IE仅显示11列

HTML代码

 .grid-lines { background-size: 8.3469%;/*8.39*/ background-image: linear-gradient(to left, #EECBCB 1px, transparent 1px); background-image: -webkit-linear-gradient(left, #EECBCB 1px, transparent 1px); background-image: -moz-linear-gradient(to left, #EECBCB 1px, transparent 1px); background-image: -o-linear-gradient(to left, #EECBCB 1px, transparent 1px); background-color: white; background-repeat: round; //background-repeat: space; } 

 <div style="width:100%;height:100px" class="grid-lines"> </div> 

这是我的代码https://jsfiddle.net/07eaht8L/3/

提前致谢...

Answer 1

如果您将1px更改为0.07em（最低IE似乎接受），它将停止Window Resize上消失/闪烁。

https://jsfiddle.net/0n55p0p2/

background-image: linear-gradient(to left, #EECBCB 0.07em, transparent 0.07em);

这不是一个完美的解决方案，因为0.0625em = 1px，但我看不出并排比较的差异。 但是，它可能是IE的子像素渲染问题，这个额外的宽度阻止它消失。

我尝试过变换，缩放，抗锯齿，但它不适用于渐变。

删除Chrome中的额外空间

我认为这是WebKit计算子像素的百分比错误。

您可以创建仅在Chrome WebKit中更改宽度％的媒体查询。 缩放浏览器时空间会发生变化。 我选择了％和分辨率值来抵消额外的空间。 将值更改为您认为最佳的值。

并且不要使用background-repeat：round或space。

https://jsfiddle.net/frpfgp16/

@media (max-width: 720px) {
  .grid-lines {
      -webkit-background-size: 8.5% !important;
  }
}
@media (min-width: 721px) {
  .grid-lines {
      -webkit-background-size: 8.39% !important;
  }
}