css - 线性渐变 IE11 空白问题

Question

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

我在这里举了一个例子:

https://jsfiddle.net/ravcg28r/

    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

Answer 1

似乎您正在将两个类合二为一，这可能会造成混淆。 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>