頁面只在緩存清除時正確顯示

Question

我有一個浮動列表菜單，只有在通過菜單或Ctrl + F5清除緩存後才能正確顯示在Firefox中。只要刷新頁面，菜單就會再次被打破。

列表元素中的鏈接比文本寬，但我沒有設置任何寬度。當我右鍵單擊這些鏈接時，寬度似乎更新爲正確的值。

任何想法？

您可以使用這個提琴：https://jsfiddle.net/cc43r3nm/2/ 請注意firefox中的每個主要項目之後的額外空間，當您右鍵單擊它並移動鼠標時，它將消失。

由於某些原因，Stackoverflow剪切的東西不能正確渲染它。

.navigation { 
    position: relative; 
    top: 45px; 
    left: -50%; 
    z-index: 800; 
} 
.navcontainer { 
    float: right; 
    position: relative; 
    top: 4px; 
    font-size: 16px; 
} 
.first_row { 
    margin-bottom: 10px; 
} 
ul.category_nav { 
    position: relative; 
    left: 50%; 
    list-style: none outside; 
} 
ul.category_nav ul li { 
    background-image: none; 
} 
ul.category_nav ul { 
    display: none; 
    position: absolute; 
    z-index: 10000; 
    width: 190px; 
    background-color: white; 
    margin-left: -10px; 
    border-top: 0; 
    list-style: none; 
    padding: 20px 0 10px 0; 
    -webkit-box-shadow: 0 5px 4px 2px rgba(0, 0, 0, 0.1); 
    /* WebKit */ 
    -moz-box-shadow: 0 5px 4px 2px rgba(0, 0, 0, 0.1); 
    /* Firefox */ 
    box-shadow: 0 5px 4px 2px rgba(0, 0, 0, 0.1); 
    /* Standard */ 
} 
.no-boxshadow ul.category_nav ul { 
    border: 1px solid #888; 
} 
ul.category_nav ul a { 
    text-transform: none; 
    display: block; 
    font-size: 0.75em; 
    line-height: normal; 
} 
ul.category_nav ul a:first-letter { 
    text-transform: none; 
} 
ul.category_nav ul ul { 
    top: auto; 
    list-style: none; 
} 
ul.category_nav ul li:hover a { 
    color: #999; 
} 
ul.category_nav li:hover ul ul, 
ul.category_nav li:hover ul ul ul, 
ul.category_nav li:hover ul ul ul ul, 
.no-touch ul.category_nav li.hover ul ul, 
.no-touch ul.category_nav li.hover ul ul ul, 
.no-touch ul.category_nav li.hover ul ul ul ul { 
    display: none; 
} 
ul.category_nav li:hover ul, 
ul.category_nav li li:hover ul, 
ul.category_nav li li li:hover ul, 
ul.category_nav li li li li:hover ul, 
.no-touch ul.category_nav li.hover ul, 
.no-touch ul.category_nav li li.hover ul, 
.no-touch ul.category_nav li li li.hover ul, 
.no-touch ul.category_nav li li li li.hover ul { 
    display: block; 
} 
ul.category_nav li { 
    position: relative; 
    float: left; 
    padding: 2px 10px 2px 15px; 
    background: transparent url('http://i.imgur.com/QVCbAqk.png') no-repeat 0 13px; 
    line-height: 28px; 
} 
ul.category_nav li.first_navcontainer { 
    padding-left: 0; 
    background-image: none; 
} 
.category_nav li a:first-letter { 
    font-size: 15px; 
} 
.category_nav li li a:first-letter { 
    font-size: inherit; 
} 
.category_nav li li { 
    float: none; 
} 
.category_nav a { 
    display: block; 
    font-weight: 400; 
    font-family: 'Lato', sans-serif; 
    color: black; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 13px; 
    letter-spacing: 2px; 
    height: 28px; 
    line-height: 28px; 
} 

HTML：

<div class="navigation"> 
    <div class="navcontainer" class="first_row"> 
     <ul class="category_nav"> 
      <li class="first_navcontainer"> 
       <a href="">Example 1</a> 
       <ul class=""> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
       </ul> 
      </li> 
      <li class=""> 
       <a href="">Example 2</a> 
       <ul class=""> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
       </ul> 
      </li> 
      <li class=""> 
       <a href="">Longer Example 3</a> 
       <ul class=""> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
       </ul> 
      </li> 
      <li class=""> 
       <a href="">Example 4</a> 
       <ul class=""> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
       </ul> 
      </li> 
      <li class=""> 
       <a href="">Longer Example 5</a> 
       <ul class=""> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

    <div class="navcontainer" class="second_row"> 
     <ul class="category_nav"> 
      <li class="first_navcontainer"> 
       <a href="">Example 6</a> 
       <ul class=""> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
       </ul> 
      </li> 
      <li class=""> 
       <a href="">Example 7</a> 
       <ul class=""> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
       </ul> 
      </li> 
      <li class=""> 
       <a href="">Example 8</a> 
       <ul class=""> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
       </ul> 
      </li> 
      <li class=""> 
       <a href="">Longer Example 9</a> 
       <ul class=""> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
       </ul> 
      </li> 
      <li class=""> 
       <a href="">Example 10</a> 
       <ul class=""><li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

您的例子並不能使問題很清楚，因爲它有一個可怕的很多額外的樣式和標記，沒有做任何事情。

但沸騰的代碼下來，藉以說明問題所需的最低限度，那就是：

如果浮動元素的第一個字母有不同的字體大小，瀏覽器計算其寬度彷彿整個元素有這樣的大小。 （除非元件是a，它具有焦點，例如通過右鍵點擊它。）

span { 
 
    float:left; 
 
} 
 
span::first-letter { 
 
    font-size:1.5em 
 
}

<span>This text has a larger first letter</span> This is the rest of the text

這聽起來像在Firefox的錯誤。現在我對Bugzilla很糟糕，所以我找不到它，但如果沒有人發現它，我會感到驚訝。

因此沒有解決方案（除非要等到bug修復），但作爲一種解決方法，請從您的CSS中刪除::first-letter樣式。這就是我必須爲你提供的。