Question

FFox渲染水平div表和下垂直div表的交互与所有其他浏览器不同。这是最近的问题7/2015。在除FFox之外测试的所有浏览器中，水平菜单上的垂直列表在CSS中被调出为左对齐。但在FFox中，水平菜单结束的权利是合理的。我将WEB html简化为2个div部分的特定CSS交互。在下面的代码中，＆＃34; widemenu＆＃34;高度和字体影响问题。但是我不明白为什么。增加＆＃34; widemenu＆＃34;高度从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>

Answer 1

不同之处在于不同浏览器的字体呈现方式。浮动li元素的高度取决于它们包含的文本行的高度，而后者又取决于解释字体度量的方式和浏览器舍入的值。

示例中这些li元素的高度约为30px。在Firefox中，它们的分数略高于30px，而在其他浏览器中，它们要么完全要么低于30px。

因此，当浏览器查找表位时，它会首先尝试将其放在较早浮动的项目旁边。在其他浏览器中，ul的高度消耗了li元素旁边的所有空间，因此浏览器再次从左侧开始并将表放在左侧。

在Firefox中，ul元素的高度几乎（但不是）非常消耗li元素旁边的空间，因此表位于ul下面但位于li元素旁边。

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

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

#tblmenu {
    clear:left;
}

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

_{您可能更喜欢使用＆＃34; clearfix＆＃34;而不是使用ul元素的高度。在那个元素上。在SO和更广泛的网络上都详细介绍了Clearfix。}

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

1 个答案: