Firefox 显示不必要的水平滚动条
我想要达到的效果是这样的：我想要一行带有标题的文本，在它下面我想要一个表格。该表格可能太高而无法放入浏览器窗口，因此如有必要，我想要一个垂直滚动条。表格不应太宽，因此不需要水平滚动条（但我仍然希望在必要时显示它）。无论哪种方式，我都不希望标题滚动；因此，出现一个垂直滚动条，我滚动表格，标题应该是固定的。我正在尝试设置一个<div>其宽度是浏览器决定显示表格所需的任何宽度（标题将小于该宽度）。
这是我尝试过的：
<html>
<head>
<title>Page title</title>
<style type="text/css">
.mytab { border-style: solid; border-collapse: collapse }
table.mytab td { border-style: solid; border-width : 1px;
padding: 5px }
</style>
</head>
<body>
<div style="display: inline-table">
<div style="padding-bottom: 10px; text-align: center">Table title</div>
<div style="height: 100px; overflow: auto">
<table class="mytab">
<tr><th/><th>Data1</th><th>Data2</th><th>Data3</th></tr>
<tr><td>AAAA</td><td>12348173</td><td>7598734</td><td>zioxuoiuf</td></tr>
<tr><td>BBBB</td><td>29834782</td><td>7895232</td><td>kuoiu2kjf</td></tr>
<tr><td>CCCC</td><td>98291123</td><td>io242o2</td><td>982734211</td></tr>
</table>
</div>
</div>
</body>
</html>
（我最终希望表格的高度超过 100 像素，但我设置了它以便我可以测试滚动条。）
这在 Chrome (53.0.2785.116 m) 中实现了我想要的，但在 Firefox (49.0.1) 中没有。在 Chrome 中，浏览器似乎会计算出表格的宽度，然后在其右侧添加一个垂直滚动条。在Firefox中，它出现在浏览器计算出有多宽，使表，但随后持仓垂直滚动条里面那个宽度的盒子，模糊表的一部分。然后它会附加一个水平滚动条，因为您无法看到所有表格。
与 Chrome 的外观：
Firefox 外观：
（对我来说，Firefox 在垂直方向上显示较少的表格并不重要。但我绝对不希望水平滚动条出现，除非有必要。）
我该如何解决这个问题，让它在 Firefox 中工作？
我们在工作中经常遇到这个问题。看来 Mozilla 的渲染方式与 Chrome 不同。
通过检查，我能够通过向包含<div>表格的最里面添加 16 像素的右侧填充来解决格式问题。正如您可以自己验证的那样，这有效地为垂直滚动条添加了足够的空间，使得水平滚动条不会出现。
唯一的问题是，这会将 Chrome 中的滚动条推得太靠右。因此，我在 CSS 中添加了一个检查，以将样式仅应用于 Mozilla 浏览器。我在 Chrome 和 Mozilla 中进行了测试，看起来不错。
<style type="text/css">
.mytab { border-style: solid; border-collapse: collapse }
table.mytab td { border-style: solid; border-width : 1px;
padding: 5px }
@-moz-document url-prefix() {
.moz-div { padding-right: 16px; }
}
</style>
<div class="moz-div" style="height: 100px; overflow: auto">
顺便说一句，Mozilla 中的问题也出现在 IE 中（至少 IE 10），因此您应该检查所有浏览器和设备，并相应地更新您的 CSS。