html - 只有清除缓存后页面才能正确显示

Question

我有一个 float 列表菜单，它只能在清除缓存后直接在 firefox 中正确显示，无论是通过菜单还是使用 Ctrl + F5。我一刷新页面，菜单又坏了。

列表元素内的链接比文本宽，但我没有设置任何宽度。当我右键单击这些链接时，宽度似乎更新为正确的值。

有什么想法吗？

你可以使用这个 fiddle :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

你的例子并没有把问题说得很清楚，因为它有很多额外的样式和标记，实际上并没有做任何事情。

但是将代码简化为显示问题所需的最低限度，就是这样:

如果 float 元素的第一个字母具有不同的字体大小，浏览器会计算其宽度，就好像整个元素具有该大小一样。 (除非该元素是 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 很糟糕，所以我找不到它，但如果以前没有人找到它，我会感到惊讶。

因此没有解决方案(除非等到错误被修复)，但作为解决方法，从您的 CSS 中删除 ::first-letter 样式。这就是我所能提供的。