Question

我正在尝试为自己为我网站上的某些状态框构建一个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

Answer 1

似乎你正在使用两个Class合二为一，这可能会让人困惑。 IE11可能是一场噩梦，但我已经修好了，它应该可以在Ie11上使用。

你可以在上面看到它 https://www.codeply.com/go/8gTRzBR8Qd

您的代码是

parse

我改变它，有两个类似的类有sb和sb-red，所以最好删除其中一个。我也改变了一些CSS。

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

Answer 2

我很遗憾不知道为什么，但它发生在IE 10的135％缩放上，它似乎是边框问题，而不是渐变bg本身。

我设法修改了border .sb-green更改为：

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

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

我猜测它的一些问题，当它用大小的分数（如12px * 135％zooom等0.2em）计算时，它会使边界大小变圆。我认为像素大小不会发生。 ..但我理解为什么你试图使用相对的; - ）

线性梯度IE11白色空间问题

2 个答案: