奇怪的白色像素边框 - IE 9

Question

我在IE-9上遇到边界半径问题

如您所见，它会在左边框上创建一些白色像素。任何想法为什么会这样？

这只发生在IE 9上，所有其他浏览器都可以

这是标记：

                    <ul class="tags clearfix">
                        <li>
                            <a href="javascript:void(0)">Etiqueta Uno</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Otra etiqueta</a>
                        </li>
                    </ul><!-- tags -->

这是CSS：

#article_sidebar ul.tags li {
    background: #000000;
    list-style: none;
    float: left;
    margin-right: 4px;
    padding: 0px 18px 0px 19px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    line-height: 20px;
    margin-bottom: 4px;
}

Answer 1

@fxg为什么不尝试制作 IE-Only样式表。你可以参考this制作一个样式表，它只针对IE，你可以在那个样式表中给出

li{
    border: 0 none;
}

希望，这对你有用。

Answer 2

如果我不得不猜测，我会说这是一个舍入错误。这可能在某些条件下发生，例如当计算值是非终止浮点值时（即 - 3.3333333 ...）。根据浏览器的舍入方式，这可能会产生视觉错误，例如您所看到的内容。

看看你的填充值。注意你的padding-right是18px，右边没有这个问题，但你的padding-left是19px？尝试将padding-left更改为18px，看看是否能解决问题。

另外，尝试将border-radius值更改为更大的值，例如3px或4px，看看它是否会发生任何变化。

另外，请确保您没有意外地轻微放大。您可以通过按 ctrl + 0 来确保重置浏览器的缩放。

Answer 3

您可以尝试为overflow: hidden;设置li，为outline: none;设置a。