Google chrome Webkit框将gitches阴影显示在其他元素的顶部

我用

transform:rotate（）

和

box shadow

定位了一些导航元素。当你悬停它们时，它们会弹出一点，表示你可以点击它们。在Chrome和Safari中（表明这是webkit问题），当您将某些导航项目悬停时，框阴影会失控，并覆盖其他随机元素的部分。它在Firefox中运行良好

我做了一个jsfiddle，尽可能简单地描述了这个问题，我想知道如何：

将鼠标悬停在前一个或前两个元素上，然后从中取出，您将看到问题正在起作用

我正在工作的站点存在以下问题：

（如果此URL不起作用，则URL将很快更改为）

如果有人能想出一个仍然使用CSS3使其看起来正常的解决方案（可能在悬停时再次设置z索引，或者其他一些我不确定的奇怪解决方案），我将非常感激：）我真的不想求助于图像：(

更新：

我被告知它在Windows Chrome=\n上看起来不错，我正在使用Mac OSX 10.6，下面是我看到的行为的屏幕截图：

---

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

我找到了一个主要有效的解决方法。发现了这个stackoverflow问题：与使用javascript强制重新绘制元素有关。因此我更新了我的代码，强制使用框阴影重新绘制元素：

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

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

我只尝试重新绘制悬停的元素

重新绘制我（$（此））

但它不起作用，当其中任何一个悬停时，我需要重新绘制所有这些元素。看起来基本上可以做到这一点，但在每个元素之间的裂缝中仍会出现一些较暗的阴影。我觉得这是可以接受的，几乎不值得注意。jsfiddle我的概念证明：

还没有用它更新那个实时站点，但很快就会更新

如果有人能设法让每个元素之间的阴影消失，我会接受你的答案：）

---

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

我找到了一个基本可行的解决方案。发现这个stackoverflow问题：与使用javascript强制重新绘制元素有关。因此，我用这段代码更新了我的小提琴，以强制使用方框阴影重新绘制元素：

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

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

我只尝试重新绘制悬停的元素

重新绘制我（$（this））但它不起作用，当它们中的任何一个被悬停时，我需要重新绘制它们。看起来基本上可以做到这一点，但在每个元素之间的裂缝中仍然会出现一些较暗的阴影。我觉得这是可以接受的，几乎不值得注意。jsfiddle与我的概念验证：


还没有用它更新那个实时站点，但很快就会更新

如果有人能设法让每个元素之间的阴影消失，我会接受你的答案：）

同样，这可能只发生在MacOS X上的chrome和safari中。
这确实帮助我解决了一个完全不同的问题，即在更改style.clip css属性后，div无法正确重新绘制。奇怪的是，我的问题似乎也只发生在webkit上，但在windows和osx机器上——在chrome 24和26（dev）上——这确实帮助我解决了一个完全不同的问题，即div在更改style.clip css属性后无法正确重画。奇怪的是，我的问题似乎也只发生在webkit上，但都发生在windows和osx机器上——都发生在Chrome24和26（开发人员）