javascript - 使用线性渐变 CSS 将 html Div 分成 12 列

Question

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

我在 IE 浏览器和 Chrome 浏览器上遇到问题。

1. Chrome 浏览器在调整窗口大小时显示 12 列后有一些额外空间。
2. 如果使用背景重复:圆形且窗口大小小于 900 像素，IE 不会在调整窗口大小时显示网格线
3. 如果用户背景重复:空格，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 似乎可以接受)，它将停止窗口调整大小时的消失/闪烁。

https://jsfiddle.net/0n55p0p2/

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

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

我尝试过变换、缩放、抗锯齿，但它对渐变不起作用。

删除 Chrome 中的多余空间

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

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

并且不要使用背景重复:圆形或空格。

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