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

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

html css firefox

Html div部分的交互行为与FFox和所有其他浏览器不同,html,css,firefox,Html,Css,Firefox,FFox使水平div表和较低垂直div表的交互不同于所有其他浏览器。这是最近的一个问题，2015年7月。在除FFox之外的所有测试浏览器中，水平菜单上的垂直列表都是左对齐的，如CSS中所示。但在FFox中，水平菜单的右端是合理的。我将WEB html简化为两个div部分的特定CSS交互。在下面的代码中，“widemenu”的高度和字体会影响问题。但是我不明白为什么。将“widemenu”的高度从30增加或减小字体大小可以解决问题，但我想知道原因。我是新手，所以我希望我做得对 <head&

FFox使水平div表和较低垂直div表的交互不同于所有其他浏览器。这是最近的一个问题，2015年7月。在除FFox之外的所有测试浏览器中，水平菜单上的垂直列表都是左对齐的，如CSS中所示。但在FFox中，水平菜单的右端是合理的。我将WEB html简化为两个div部分的特定CSS交互。在下面的代码中，“widemenu”的高度和字体会影响问题。但是我不明白为什么。将“widemenu”的高度从30增加或减小字体大小可以解决问题，但我想知道原因。我是新手，所以我希望我做得对

<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>


#tblmenu表{
浮动：左；
右边距：5px；
边缘顶部：15px；
宽度：85px；
/*明确：两者皆有*/
字体系列：Arial，无衬线；
字体大小：正常；
字号：8pt；
}
#李伟民{
浮动：左；
填充：5px20px 5px 5px；
字体系列：漫画式无MS字体、Arial字体、无衬线字体；
字体大小：14px；
}
#宽菜单{
背景色：#FFD98F；
高度：30px；
}




纵队
（计数）

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

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

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

在Firefox中，ul元素的高度几乎（但不是）占用了li元素旁边的空间，因此表位于ul元素下方，但位于li元素旁边

因此，增加ul元素的高度可以通过消耗li元素旁边的空间来解决问题，而减小字体大小会使li元素的高度变小，因此再次消耗li元素旁边的所有空间

为确保表格完全不位于li元素旁边，请对浮动li元素后面的元素使用

清除属性。所以只要加上
#tblmenu {
    clear:left;
} 

有关工作示例，请参见

与使用ul元素的高度不同，您可能更喜欢在该元素上使用“clearfix”。SO和更广泛的web上都详细介绍了Clearfixes。
区别在于不同浏览器的字体呈现。浮动li元素的高度取决于它们所包含的文本行的高度，而文本行的高度又取决于浏览器对字体度量的解释方式和四舍五入的值
在您的示例中，这些li元素的高度约为30px。在Firefox中，它们略高于30px，而在其他浏览器中，它们要么正好大于30px，要么小于30px
因此，当浏览器查找表的位置时，它首先尝试将其放置在先前浮动的项旁边。在其他浏览器中，ul的高度会占用li元素旁边的所有空间，因此浏览器会再次从左侧开始，并将表格放在左侧
在Firefox中，ul元素的高度几乎（但不是）占用了li元素旁边的空间，因此表位于ul元素下方，但位于li元素旁边
因此，增加ul元素的高度可以通过消耗li元素旁边的空间来解决问题，而减小字体大小会使li元素的高度变小，因此再次消耗li元素旁边的所有空间
为确保表格完全不位于li元素旁边，请对浮动li元素后面的元素使用清除属性。所以只要加上
#tblmenu {
    clear:left;
} 

有关工作示例，请参见

与使用ul元素的高度不同，您可能更喜欢在该元素上使用“clearfix”。SO和更广泛的web上都详细介绍了Clearfixes。
欢迎使用SO。虽然指向包含相同代码的JSFIDLE（或类似文件）的链接会很有用，但您确实做到了这一点。我已经在下面的回答中回答了你的问题。欢迎来到SO。虽然指向包含相同代码的JSFIDLE（或类似文件）的链接会很有用，但您确实做到了这一点。我已经在下面的回答中回答了你的问题。非常感谢。我隐约知道问题出在哪里，但这清楚地表明了这一点。有很多CSS选项！我将添加clear或clearfix…非常感谢。我隐约知道问题出在哪里，但这清楚地表明了这一点。有很多CSS选项！我将添加clear或clearfix。。。