Webkit 盒子阴影在其他元素之上出现问题

Question

我有一些使用 transform:rotate() 和 box-shadow 定位的导航元素。当您将它们悬停时，它们会稍微“弹出”，表明您可以单击它们。在 Chrome 和 Safari 中（表明这是一个 webkit 问题），当您将鼠标悬停在某些导航项上时，框阴影会变得混乱并覆盖其他随机元素的部分。它在 Firefox 中运行良好。

我做了一个 jsfiddle 来描述这个问题，就像我能弄清楚如何做一样：

http://jsfiddle.net/Q39eJ /1/

将鼠标悬停在前一个或前两个元素上，然后再移出，您将看到正在发生的问题。

我正在处理的网站存在问题：

http://temp.go-for-english。 com/

（URL 即将更改为 http://www.go-for-english.com 如果这个不起作用）

如果有人能找到解决方法仍然利用CSS3使其看起来正常（也许在悬停时再次设置z-index，或者我不确定的其他一些奇怪的解决方法）我非常感激它:)我真的不想诉诸于图片 :(

更新：

我被告知它在 Windows Chrome 上看起来很好 =\ 我使用的是 Mac OSX 10.6，这是我看到的行为的屏幕截图：

http://s9.photobucket.com/albums/a74/nZifnab/?action=view&current=Screenshot2012-01-19at13205PM.png

我的客户也指出了这个问题，因为他们使用 Safari。

Answer 1

我想出了一些大部分有效的解决方法。发现这个 stackoverflow 问题：我该怎么办强制 WebKit 重绘/重绘以传播样式更改？ 与使用 JavaScript 强制重绘元素相关。因此，我用此代码更新了我的小提琴，以强制重新绘制带有框阴影的元素：

$(function() {
    $('.top-nav a').hover(function() {
        redrawMe($('.top-nav a'));
    })
});

function redrawMe(obj) {
    obj.hide();
    obj.each(function() {
        this.offsetHeight;
    });
    obj.show();
}

我尝试仅重绘悬停的元素 redrawMe($(this)); 但它不起作用，当其中任何一个悬停时，我需要重新绘制所有它们。看起来大部分都成功了，但每个元素之间的裂缝中仍然出现一些较暗的阴影。我觉得这是可以接受的并且几乎不被注意到。 jsfiddle 与我的概念证明：

http://jsfiddle.net/nzifnab/Q39eJ/4/

尚未使用它更新该实时站点，但很快就会更新。

如果有人能设法找到一种方法，让每个元素之间的阴影消失，我会接受你的答案:)

同样，这可能只发生在 MacOS X 的 chrome 和 safari 上。