Страница только отображается правильно при очистке кеша

Question

У меня есть меню с плавающим списком, которое отображается только правильно в firefox непосредственно после очистки кеша, либо через меню, либо с помощью Ctrl + F5. Как только я обновляю страницу, меню снова сломается.

Ссылки внутри элементов списка более широкие, чем текст, но я не устанавливаю ширину. Когда я нажимаю на эти ссылки, ширина, кажется, обновляется до правильного значения.

Любые идеи?

Вы можете использовать эту скрипту: https://jsfiddle.net/cc43r3nm/2/ Обратите внимание на дополнительное пространство после каждого основного элемента в firefox, который исчезает, когда вы нажимаете на него правой кнопкой мыши и перемещаете мышь.

По какой-то причине Stackoverflow snipped thingy не отображает его правильно.

.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, поэтому я не могу его найти, но я был бы удивлен, если бы никто не нашел его раньше.

Так что нет решения (кроме того, чтобы ждать, пока ошибка исправлена), но в качестве обходного пути удалите стили ::first-letter из вашего CSS. Это все, что я должен тебе предложить.