Firefox計算區塊較大？

Question

我在導航菜單上出現了一個奇怪的問題，只在Firefox中出現（在IE7,8,9,10 & Chrome中正常工作）。菜單上的鏈接顯示爲塊，但是它們在Firefox中的計算量比其他任何瀏覽器都大（寬度更大），因此它們沒有正確對齊。奇怪的是，一旦鏈接被點擊，即使它是一個正確的點擊，然後Firefox將它們放到應該如何。

CSS已重置，並在Firefox中發生此問題，所以我認爲這是一個Firefox錯誤？

<nav> 
    <ul id="primary-nav"> 

     <li><a id="nav-home" href="/wordpress">HOME</a></li> 
     <li><a id="nav-work" href="/wordpress/work">WORK</a></li> 
     <li><a id="nav-about" href="/wordpress/about">ABOUT</a></li> 
     <li><a id="nav-contact" href="/wordpress/contact">CONTACT</a></li> 
     <li><a id="nav-blog" href="">BLOG</a></li> 

    </ul> 
</nav> 


ul#primary-nav li { 
    float: left; 
    list-style-type: none; 
    background: none; 
    padding: 0; 
    margin-left: 25px; 
} 

ul#primary-nav li a { 
    font-size: 1.5em; 
    display: block; 
    padding-top: 40px; 
} 

ul#primary-nav li a#nav-home { 
    background: url('./images/nav-home-button.png') top center no-repeat; 
} 

ul#primary-nav li a#nav-work { 
    background: url('./images/nav-work-button.png') top center no-repeat; 
} 

ul#primary-nav li a#nav-about { 
    background: url('./images/nav-about-button.png') top center no-repeat; 
} 

ul#primary-nav li a#nav-contact { 
    background: url('./images/nav-contact-button.png') top center no-repeat; 
} 

ul#primary-nav li a#nav-blog { 
    background: url('./images/nav-blog-button.png') top center no-repeat; 
} 

ul#primary-nav li a:first-letter { 
    font-size: 1.3em; 
} 

Answer 1

結論：有一個錯誤在Firefox該計算錯誤的元素的寬度如果：第一字母具有字體大小集。

該錯誤已在2007年填寫完畢：https://bugzilla.mozilla.org/show_bug.cgi?id=385615。截至2013年1月，它仍然開放。從那裏鏈接到這個答案。

其實there is already a Stack Overflow question從2011年9月開始尋求解決方法。

接受的解決辦法是，以觸發迴流通過執行動畫（credit: kizu）

@-moz-keyframes bugfix { from { padding-right: 1px ; } to { padding-right: 0; } } 

.test {-moz-animation: bugfix 0.001s;} 

---

---

下面是一個說明這個問題（http://jsfiddle.net/6eYu6/1/）最小的測試案例：

<div><a href="#">HOME</a></div> 
<div><a href="#">WORK</a></div> 

div{float: left;} 
a{display: block;} 
a:first-letter {font-size: 1.3em;}​ 

在Chrome ，沒有差距（預期的行爲）。在Firefox中，由於a元素更寬，所以存在差距。

---

我的研究：

在點擊第一個鏈接，或Tab鍵將其，差距消失。當鏈路失去重點時，差距不會再出現。鏈接重新出現在頁面重新加載。

如果href屬性被刪除（http://jsfiddle.net/6eYu6/2/），則差距仍然存在。點擊不再有任何效果。

添加點擊處理程序或阻止點擊操作（jQuery中的return false）在任一方向都沒有效果。這同樣適用於focus事件（其是觸發，存在href）。防止focus事件消除了鏈接上的Tab鍵效應。

---

卸下float屬性和內嵌轉動所有元素導致可預測的行爲（一個空白尺寸間隙，上點擊沒有任何影響）。但是，:first-letter的效果也會消失。

當font-size被移除時，或提供給整個鏈路，或給予一個跨度，間隙消失。

鏈接的寬度（在firefox中，點擊修復之前）與整個文本具有該字體大小的寬度相同。

當hover效果，其涉及調整元件被添加到鏈接，間隙上第一懸停消失。

當浮動被刪除，鏈接寬度是100％（自然）。