爲什麼活動元素在Firefox中有文物？

Question

我使用表格創建了一個導航欄，但是在firefox中，主動/被聚焦的元素具有類似於背面圖片（```）的頂部顯示（我認爲它們實際上渲染輪廓很差）：

爲什麼他們在那裏，我該如何擺脫他們？

JSFiddle

Answer 1

這是Firefox中的渲染問題：#434301。

由David Baron在Firefox的Bugzilla的註釋闡明爲什麼它的樣子是原因：

什麼CSS說的是，包含塊內聯得到分成 一塊塊和一塊前塊後;你會看到 之前的塊得到一個大綱。這種行爲可能 不理想......

您可以通過避免有display:block元素是直接在display:inline內避免此問題。

前面的回答：

一個最小的測試用例再現在我的機器的錯誤：http://jsfiddle.net/P2BEV/2/

注意<a>是內嵌元素而<div>是塊元件和一個內聯元素不能包含有效HTML的塊元素。如果<div>被刪除或者如果它被轉換爲display: inline與CSS，並且它將顯示，如果<span>已被轉換爲display: block，則人造物本身消失。如果您將添加display: block轉換爲<a>，則人造物也會消失。

再試驗一下，每當Firefox繪製包含display:block元素的display:inline元素的輪廓時，似乎都會出現問題。

Answer 2

試圖複製另一臺計算機上運行Linux和Firefox的這一問題。如果失敗，那麼這是您的操作系統，瀏覽器或圖形設置的問題。