页面只在缓存清除时正确显示

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样式。这就是我必须为你提供的。