ff/ie 中的 CSS 六邊形渲染問題

Question

我在這個站點上有一個六邊形菜單，它可以在 chrome 中正常工作，但在 FF 和 IE 中存在渲染問題。

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

當您將鼠標懸停在 FF/IE 中的六邊形菜單時，您可以看到 2 條未完全被懸停效果覆蓋的藍線。

因為我剛從一位離職的同事那里得到了這個網站，所以我不知道從哪里開始。

任何幫助，將不勝感激。 謝謝

Answer 1

轉換后的元素——比如你用來創建六邊形的傾斜元素——最終的位置是以像素的分數來衡量的，因此瀏覽器必須判斷如何在屏幕上顯示元素，而在數學上完美的形狀需要以塊狀像素網格表示。

兩個透明元素彼此相鄰，並且由於這種舍入而略微重疊。 由於元素略微透明，任何重疊都會顯示為一條黑線。

從數學上講，這些元素並不接觸，但由於瀏覽器的表達和簡化，它們現在略有重疊。

在 Firefox 上，這些行僅在轉換完成時出現。 發生這種情況是因為渲染引擎在動畫期間的行為與完成時的行為不同。

為了解決這個問題，我會嘗試在用戶懸停時使用完全不透明的背景顏色。 這樣即使是戲劇性的重疊也不會導致顏色的變化。