div 部分的交互与 FFox 和所有其他浏览器的行为不同答案

【问题标题】：Interaction of div sections behaves different with FFox and all other Browsersdiv 部分的交互与 FFox 和所有其他浏览器的行为不同
【发布时间】：2015-07-22 15:32:15
【问题描述】：

FFox 呈现与所有其他浏览器不同的水平 div 表和较低垂直 div 表的交互。这是最近的一个问题 7/2015。在除 FFox 之外的所有经过测试的浏览器中，水平菜单上的垂直列表左对齐，如 CSS 中所示。但在 FFox 中，它位于水平菜单结束位置的右侧。我将 WEB html 缩减为 2 个 div 部分的特定 CSS 交互。在下面的代码中，“widemenu”高度和字体会影响问题。但是我不明白为什么。将“widemenu”高度从 30 增加或减小字体大小可以解决问题，但我想知道原因。我是 SO 新手，所以我希望我做对了。

<head>
<style media="screen" type="text/css">
#tblmenu table{
    float: left;
    margin-right: 5px;
    margin-top: 15px;
    width: 85px;
    /*clear: both;*/
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 8pt;
}

#widemenu ul li {
    float: left;
    padding: 5px 20px 5px 5px;
    font-family: Comic Sans MS, Arial, sans-serif;
    font-size: 14px;
}

#widemenu {
    background-color: #FFD98F;
    height: 30px;
}
</style>
</head>

<body>
<div id="widemenu">
    <ul>
    <li><a href="">HorListItem-1</a></li>
    <li><a href="">HorListItem-2</a></li>
    </ul>
</div>

<div id="tblmenu">
    <table cellspacing="0" cellpadding="0" border="0">
    <tbody>
    <tr>    <td align="center" colspan="2"><b>A&nbsp;Column</b></td>    </tr>
    <tr>    <td align="center" width="85%"><a href="">Column Item</a></td>  <td>(Count)</td>    </tr>
    </tbody>
    </table>
</div>

</body>

</html>

【问题讨论】：

欢迎来到 SO。您确实做到了这一点，尽管指向包含相同代码的 jsfiddle（或类似内容）的链接会很有用。我已经在下面的回答中解决了您的问题。

标签： html css firefox

【解决方案1】：

区别在于不同浏览器的字体渲染。浮动 li 元素的高度取决于它们包含的文本行的高度，而这又取决于字体度量的解释方式和浏览器舍入的值。

您的示例中这些 li 元素的高度约为 30 像素。在 Firefox 中，它们略高于 30 像素，而在其他浏览器中，它们要么正好是 30 像素，要么小于 30 像素。

因此，当浏览器定位表格时，它首先会尝试将其放在先前浮动的项目旁边。在其他浏览器中，ul的高度占用了li元素旁边的所有空间，所以浏览器又从左边开始，把表格放在左边。

在 Firefox 中，ul 元素的高度几乎但不会完全占用 li 元素旁边的空间，因此表格位于 ul 下方但位于 li 元素旁边。

所以增加 ul 元素的高度可以通过消耗 li 元素旁边的空间来解决问题，而减小 font-size 会使 li 元素的高度更小，所以再次消耗了旁边的所有空间。

要确保表格根本不在 li 元素旁边，请在浮动 li 元素之后的元素上使用 clear 属性。所以只需添加

#tblmenu {
    clear:left;
}

有关工作示例，请参阅 http://jsfiddle.net/ghpope6x/1/。

_{您可能更喜欢在该元素上使用“clearfix”，而不是为 ul 元素使用高度。在 SO 和更广泛的网络上都详细介绍了 Clearfix。}

【讨论】：

非常感谢。我知道问题出在哪里，但这很清楚。有太多的 CSS 选项！生病添加 clear 或 clearfix...