google-chrome - 其他元素之上的 Webkit box-shadow gitches

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 问题:How can I force WebKit to redraw/repaint to propagate style changes?与使用 javascript 强制重绘元素有关。所以我用这段代码更新了我的 fiddle ，以强制重新绘制带有框阴影的元素:

$(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 中。