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并且它具有焦点，例如通过右键单击它。）

＆＃13;

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

＆＃13;

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

＆＃13;

这听起来像是Firefox中的一个错误。现在我对Bugzilla很可怕，所以我无法找到它，但如果没有人发现它我会感到惊讶。

所以没有解决方案（除非要等到修复错误），但作为解决方法，请从CSS中删除::first-letter样式。这就是我要给你的全部。

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

1 个答案: