2

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

我正在通过 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，悬停并不能解决问题。如果我移除浮子，问题就会消失。如果我删除任何其他 CSS，问题就会消失。

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

4

2 回答 2

1

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

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

（未测试）

于 2012-11-29T10:27:18.900 回答
0

每当页面上有一些浮动容器时，请始终清除父容器。在您的情况下，在 ul 上添加样式 clear:left。那应该行得通。

如果您在整个应用程序中使用许多浮点数，最好在父容器上添加一个 clearfix 类。

于 2012-11-29T10:38:41.657 回答