javascript - 通过 Javascript 添加的 CSS 链接填充在 IE 中不起作用

Question

我试着先寻找答案，但这似乎是一个边缘案例。

我正在通过 JavaScript 向链接添加一个类(实际上是 jQuery，但我认为在这种情况下这并不重要)。该类添加一个图标作为背景图像和一些填充。填充和背景图像无法出现在某些链接上。问题出现在 IE8 中，但令人惊讶的是在 IE7 中工作正常。我无法测试 IE9/10。在 Firefox 中运行良好。

我将代码减少到最低限度，并创建了一个 jsFiddle 来说明问题。 http://jsfiddle.net/toxalot/fsdcu/

我会尝试在此处添加代码。

<style type="text/css">
body { background-color: #fff }
a:hover { background-color: transparent; color: #c30 }
ul { padding-left: 40px }
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc }
</style>
<ul>
    <li style="float: left"><a class="iconNewWindowLeave" href="#">left link</a></li>
    <li style="text-align: right">some stuff on the right</li>
</ul>
<ul>
    <li style="float: left"><a class="linkExternal" href="#">left link</a></li>
    <li style="text-align: right">some stuff on the right</li>
</ul>
<script type="text/javascript">
$('.linkExternal').each(function() {
    $(this).addClass('iconNewWindowLeave');
});
</script>

我已经从示例中删除了图像并添加了背景颜色以供说明。在 IE 8 中，第二个链接没有正确的填充。将鼠标悬停在链接上，添加填充。如果我删除 a:hover CSS，悬停不会解决问题。如果我移除 float ，问题就会消失。如果我删除任何其他 CSS，问题就会消失。

所以我已经缩小了原因范围，但我不知道该怎么办。我不想删除或更改现有代码。这都是网站布局所必需的。如果可能，我想添加 一些 CSS 或 JavaScript 来修复它。这是一个小问题，但它困扰着我。我也很好奇这个问题是否出现在较新版本的 IE 中。

Answer 1

尝试添加:display:inline-block; 或 display:block; 到 .iconNewWindowLeave

.iconNewWindowLeave { padding-right: 15px; background-color: #ccc; display:inline-block; }

(未测试)