0

我有一些用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¤t=Screenshot2012-01-19at13205PM.png

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

4

1 回答 1

3

我想出了一些最有效的解决方法。发现这个 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/

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

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

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

于 2012-01-20T21:43:07.347 回答