CSS 填充在 IE8/jquery 中消失

Question

这很奇怪，它占用了我很多时间。这是一张照片，因为我只能放一个链接：http://www.screencast.com/t/byVmPE6H。解释如下。

基本上，我需要实现的是照片中的第 1 点。

请注意左侧的内边距大于右侧的内边距。初始填充属性为：

padding: 12px 15px;（即 12px 垂直填充，15px 水平）。

然后，通过 jquery，在页面加载时，我将左侧填充设置为某个值，如下所示：

$(links[0]).attr("style","padding-left : "+padding+"px;");（我本来可以用.css()，效果和问题还是一样）

这在所有浏览器中都能完美运行，你猜对了，除了 IE。我不是在谈论版本 6 或 7，而只是 IE 8。所以，在 IE 8 中，在页面加载时，我从上面的照片中得到了第 2 点。

请记住，这只发生在页面加载时。在我将指针移到链接上之后（即触发 mouseover 事件），右侧填充跳回原位并且看起来很完美，就像在第一个链接中一样（实际上第一张照片来自 IE8！）。

消除上面的 jquery 行不会触发相同的行为，15px 填充是可以的。链接上没有为“鼠标悬停”注册的事件处理程序。鼠标悬停只有这个 css 属性：

#navigation li.first:hover a{

background: transparent url(../images/menu_on_left.png) left top no-repeat;

}

（即仅更改背景图像，绝对没有其他）

因此，当页面加载时，如果我使用 jquery 更改左侧填充，右侧的填充就会消失。鼠标悬停时，右侧的填充会重新出现在视图中。我无法解释自己为什么会发生这种情况。如果我找不到解决方案，我实际上是在考虑计算所有菜单项的位置并用 position: absolute 排列它们。听起来很糟糕，我知道。

谁能赐教？

Answer 1

我终于解决了，请注意： IE 太笨了，如果你有一个浮动元素列表，并且你改变了第一个元素的右填充，另一个不会通过向右移动做出反应，它们只是站在那里。所以我所做的是：

1. 删除所有其他菜单项（通过 clone() 然后 remove() 不幸的是，我没有可用的 jquery 1.4 或者我会使用 detach()，但它工作得很好），

2. 通过 css() 更改填充

3. 重新插入其他菜单项。现在它们可以感知第一项上的新填充并正确定位。

疯了，不是吗？对我来说只是另一个讨厌 IE 的原因......

我希望这对任何人都有帮助，祝你有美好的一天！