Question

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

我做了一个描述问题的方法，就像我能弄清楚如何：

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

将鼠标悬停在第一个或第二个元素上，然后您将看到问题的实际效果。

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

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

（如果此网址不起作用，网址很快会更改为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强制重新绘制元素有关。所以我用这个代码更新了我的小提琴，强制用框阴影重新绘制元素：

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

Webkit盒子阴影在其他元素之上出现故障

1 个答案: