li 导航栏中的文本在 Chrome/ Safari 中为两行，但在 Firefox 中为一行

Question

我不确定为什么，但超过一定的字体大小后，我的导航栏中的文本显示为两行。由于某些原因，Chrome 和 Safari 中的框大小没有更新，但在 Firefox 中仍然可以正常工作。

Firefox

Chrome

这些 Web 浏览器之间有什么区别会对我的代码产生这种影响？

<nav id="topTab">
    <a href="#" id="mobNav"></a>
      <ul>
          <li><a href="http://www.example.org/" title="morning delight">page1</a></li>
          <li><a href="http://www.example.org/" title="yesterday">page2</a></li>
          <li><a href="http://www.example.org/" title="accelaaaa">page3</a></li>
      </ul>

  <div>
      <h1>
      <b href="http://localhost:8000/home.html" title="Home">Example1</b></h1> 
  </div>

</nav>

CSS:

@media only screen and (min-width : 1024px) {

a {
background: #fcfcfc;
color: #000;
text-align: center;
text-decoration: none;
font-family: 'Gloria Hallelujah';
}

#topTab{
position:relative;
}

nav#topTab {
    float: left;
    width: 100%;
    overflow: hidden;
}

nav#topTab ul {
    float: left;
    clear: left;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    left: 50%;
}

nav#topTab ul li {
    display: block;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    right: 50%;
}

nav#topTab ul li a {
    display: block;
    padding: 0 5% 0 5%;
    margin: 0 15% 0 3%;
    font-size: 2.2em;
}

nav#topTab ul li a:hover {
    background: #000;
    color: #fff;
} 

h1 {
position: relative;
text-align: center;
top: 20%;
}

h1 b {
    font-size: 2.3em;
text-decoration: none;
color: black;
font-weight: bold;
font-family: 'Caveat Brush';
}
}

Answer 1

您的无序列表是浮动的。浮动元素会将其从文档的 "natural" 流中移除，因此，您的文本正试图适应这种 "unnatural" 流。

您必须清除浮动才能再次恢复流量。这可以通过添加附加了 clear: both 样式的元素来完成。在这种情况下，您可以将两者都添加到 div 包装标题标签。

div {clear: both}

li 导航栏中的文本在 Chrome/ Safari 中为两行，但在 Firefox 中为一行

Text inside li navigation bar on two lines in Chrome/ Safari but one line in Firefox

html

css

cross-browser

navbar