线性渐变 IE11 空白问题答案

【问题标题】：linear-gradient IE11 white space issue线性渐变 IE11 空白问题
【发布时间】：2017-11-16 09:51:38
【问题描述】：

我正在尝试为自己网站上的一些状态框构建一个 css 框架。

我在这里举了一个例子：

    background: -moz-linear-gradient(    left,  #aeaeae, #aeaeae 2em, transparent 2em, transparent 100% );
    background: -webkit-linear-gradient( left,  #aeaeae, #aeaeae 2em, transparent 2em, transparent 100% );
    background: -o-linear-gradient(      left,  #aeaeae, #aeaeae 2em, transparent 2em, transparent 100% );
    background: linear-gradient(     to right,  #aeaeae, #aeaeae 2em, transparent 2em, transparent 100% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aeaeae', endColorstr='#aeaeae',GradientType=1 );

它在 chrome 和 ff 中工作得非常好，但在 IE 11 中，我的线性渐变并没有完全填满我的跨度，而且我在边框周围出现了一个恼人的小空白，请查看图片并注意绿色框中的空白图标上方。

有人知道如何预防吗？

linear gradient issue in IE11

【问题讨论】：

这与缩放越来越相关，因此请检查您的浏览器缩放设置。
缩放发生时设置为 100%。所以这应该不是问题。

标签： css

【解决方案1】：

似乎您将两个 Class 合二为一，这可能会造成混淆。 IE11 可能是一场噩梦，但我已经修复了它，在 Ie11 上应该没问题。

正如您在 https://www.codeply.com/go/8gTRzBR8Qd

你的代码是

<tr>
<td><span class="sb sb-check sb-red">Some information</span></td>
<td>&lt;span class=&quot;sb sb-check sb-red&quot;&gt;Some information&lt;/span&gt;</td>
</tr>

我改了，sb 和 sb-red 有两个相似的类，所以最好去掉其中一个。我也更改了一些 CSS。

<tr>
<td><span class="sb-red sb-check">Some information</span></td>
<td>&lt;span class="sb sb-check sb-red"&gt;Some information&lt;/span&gt;</td>
</tr>

【讨论】：

这行得通，谢谢。我确实注意到，如果我们应用边界半径，问题就会变得更糟。但是通过随着半径的增加向下调整边界，它会删除它。这是最好的解决方案。非常感谢！
完全没有问题，IE11 很容易出现故障 :-) 如果这对你有用，别忘了勾选答案。
更新：我发现仅使用带有一些定位的边框宽度会产生更好/更简单的结果：jsfiddle.net/mnfoo59k/2

【解决方案2】：

不幸的是，我不完全知道为什么，但它发生在 IE 10 的 135% 缩放中，并且似乎是边框的问题，而不是渐变 bg 本身。

我设法修复它，将 border 的 .sb-green 更改为：

.sb-green {
     border: 0.21em solid #75de75 !important;/*please mind the 0.21 */
}

以像素为单位，它无法在 4、7 处工作。

我猜想当 IE 以 12px * 135% 缩放的 0.2em 等大小的分数计算时，IE 会舍入边框大小存在一些问题。我认为像素大小不会发生这种情况。 ..但我理解你为什么尝试使用相对的;-)

【讨论】：