为什么Firefox显示效果与Chrome相差那么多呢？
完整代码如下所示。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" manifest="cache.manifest">
<head>
<title>hover伪类</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<base target="_blank">
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
li
{list-style-type: none;}
a
{text-decoration: none;}
header
{
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: #222;
}
nav,
nav > ul
{
overflow: hidden;
width: 474px;
height: 50px;
max-height: 100%;
}
nav
{margin: 0 auto;}
nav > ul > li
{
float: left;
padding: 0 12px;
height: 50px;
line-height: 50px;
}
nav > ul > li > a
{
font-size: 20px;
color: #FFF;
}
nav > ul > li:nth-child(1):hover
{background-color: #08B;}
nav > ul > li:nth-child(2):hover
{background-color: #F8B;}
nav > ul > li:nth-child(3):hover
{background-color: #0E6;}
nav > ul > li:nth-child(4):hover
{background-color: #888;}
nav > ul > li:nth-child(5):hover
{background-color: #DD2;}
nav > ul > li:hover
{transition: background-color .3s;}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="http://www.cplusplus.com/">C++</a></li>
<li><a href="https://www.w3.org/">W3C</a></li>
<li><a href="https://developer.mozilla.org/">MDN Document</a></li>
<li><a href="http://www.ecma-international.org/">ECMA</a></li>
<li><a href="http://www.w3school.com.cn/">W3school</a></li>
</ul>
</nav>
</header>
</body>
</html>在以上代码中，我在CSS部分设置了nav及其子元素ul的宽度为474px。
在Chrome的显示效果如下。
在Firefox的显示效果如下。
可见，在Firefox中，导航列表的最后一项“W3school”没有与其它导航项位于同一行，通过开发者工具，把width由474px增加至519px，所有的导航列表项才能够显示在同一行上。
我的浏览器版本如下。
同样的代码，在不同的浏览器中为什么相差那么多呢？足足相差了45px？
5
收起
正在回答 回答被采纳积分+1
2回答
我学习太差被关起来了
2019-07-23 18:21:47
我发现为什么出现问题了：居然是字体类型带来的。
我的Chrome和Firefox默认字体大小都是16px。浏览器默认字体类型，前者是Times New Roman，后者是微软雅黑。当我把Chrome的默认字体类型也改为微软雅黑，那么调试结果与Firefox是一模一样的，也就是nav的width必须至少为519px，5个li才能够位于同一行上。
以下两图是我的Chrome字体设置。
下图是我的Firefox字体设置。
当Chrome和Firefox的默认字体都设置为16px的微软雅黑后，那么代码在两种浏览器中的显示效果就一样了，即nav的最小宽度为519px，才能使5个li都位于同一行上（header）。
没想到字体类型的不同（Times New Roman与微软雅黑），会带来如此大的显示差异（472px与519px），看来前端开发真是不容易。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星