是什么导致水平滚动条出现在以下最普通的HTML浏览器上？

HTML:

铬的结果是：

中间地带-

请注意，FF和IE9都不显示此滚动条

有人能告诉我发生了什么事吗

编辑

---

删除了输入边框、填充和边距-

以下行导致额外的滚动条：

 body {
   font:13px/1.231 arial;
 }
 input {
   font:99% arial;
 }
 div {
   display: inline-block;
   overflow: auto;
 }
 input {
   width: 15em;
 }

您也可以将其保留，并向div添加一个显式宽度：

overflow: auto;

或者使div成为块级元素

width: 100%;

---

基本上，您不应该将

块

级别元素放在

内联块

级别元素中。

溢出：如果内容被剪裁，则自动强制滚动条。输入上的宽度：15em导致内容被剪裁，从而强制显示滚动条。

我猜Chrome有舍入问题

如果输入宽度使用px的任何值，滚动条将消失。 将输入字体大小更改为100%（在本例中正好等于13px）时也是如此

输入的当前宽度为15*99%*13px=193.05px

我认为.05px让滚动条出现了

---

这也澄清了为什么滚动条在宽度为11em左右时消失。它只是以Chrome可以更好地处理的方式进行了总结。

我有一个类似的问题，Chrome中出现了一个水平滚动框，但Firefox中没有

如果您的站点（与大多数站点一样）不使用水平滚动，只需隐藏x轴上的所有溢出，即可解决此问题，如下所示：

display:block

---

注意：也可以在

html

标记上设置它。不确定哪一个更好。

这是div上的

溢出：auto

。请查看我对以下答案的回答。如果我将div设置为block inline，滚动条消失我在我的Chrome版本中没有看到这个问题。然而，每个浏览器都会使用自己的填充、边框等不同的方式来呈现

输入

。您看到的是Chrome如何处理

输入

与其容器之间的关系。容器足够大，可以容纳

输入

，但它无法使容器足够大，以处理填充和边框。换句话说，您只是看到了浏览器之间的渲染差异。@cristi_b，没有

内联块

，所以本质上您所做的就是完全删除

内联块

。为什么自动溢出是一个问题？我没有看到任何元素溢出任何内容，在这种情况下，auto不应该显示任何滚动条。这只是chrome如何处理其

内联块

级别的元素。如果使用

display:block

，也可以。按照惯例，您永远不应该将

块

级别的元素放入

内联块

元素中（在您的情况下，文本框放入

内联块

div中）。

输入

不被视为块级别的元素，因此，将其放入

内联块

应该没有什么错。为什么它会强制剪切内容？如果15em剪辑了内容，那么14em肯定不会-对吗？错了，将15em改为14em，你会看到相同的效果。我认为问题实际上在于display:inline块，如果你将其改为display:inline，应该可以解决问题。而且它在11em处停止剪切。所以，剪切区域大小是15em-11em=4em？那为什么从滚动条上看只有几个像素呢？顺便说一句，我也可以更改字体设置，问题就消失了。@mark，这是Chrome如何处理您的特殊情况的问题。并非所有浏览器都是由同一个人创建的。。。每一个都会有它的小差异或错误。+1，很好的答案。每个浏览器处理这些事情的方式都不同。对于Chrome，父容器大小的计算方式显然与元素大小的计算方式不同，这是绝对正确的。我把99%改为100%，现在一切都好了。谢谢

display:block

body {
  overflow-x:hidden;
}