ff / ie

Question

我在这个网站上有一个六边形菜单，它在chrome中正常工作，但它在FF和IE中有渲染问题。

http://wrausch.de.w013b68e.kasserver.com/

当您在FF / IE中悬停六边形菜单时，您可以看到2条蓝线，这些线条未被hovereffect完全覆盖。

因为我刚从一位离开的同事那里得到了网站，所以我不知道从哪里开始。

任何帮助将不胜感激。 感谢

Answer 1

转换后的元素 - 就像用于创建六边形的倾斜元素一样 - 最终位于以像素为单位测量的位置，因此浏览器必须判断如何在数学上完美地显示元素形状需要用块状像素网格表示。

两个透明元素彼此相邻，并且由于这种圆化而略微重叠。由于元素略微透明，任何重叠都会显示为暗线。

从数学上讲，这些元素并没有触及，但由于浏览器的表达和简化，它们现在略有重叠。

在Firefox上，只有在转换完成时才会显示这些行。发生这种情况是因为渲染引擎在动画期间的行为与完成时的行为不同。

要解决此问题，我会尝试在用户悬停时使用完全不透明的背景颜色。这样即使是戏剧性的重叠也不会导致颜色发生变化。