是什么导致水平滚动条出现在以下最简单的 HTML 中的 Chrome 上？答案

【问题标题】：What causes the horizontal scrollbar to appear on Chrome in the following most trivial HTML?是什么导致水平滚动条出现在以下最简单的 HTML 中的 Chrome 上？
【发布时间】：2016-04-06 14:43:25
【问题描述】：

HTML：

<html>

  <body>
    <div>
      <input type="text">
    </div>
  </body>

</html>

CSS：

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

Chrome 上的结果：

jsFiddle - http://jsfiddle.net/XBvWb/18/

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

谁能给我指点一下，请问这是怎么回事？

编辑

移除了输入边框、内边距和边距 - http://jsfiddle.net/XBvWb/41/

【问题讨论】：

div 上的overflow:auto
请看我对以下答案的回复。
如果我将 div 设置为块内联，滚动条就会消失
我在我的 Chrome 版本中没有看到这个问题。但是，每个浏览器都会使用自己的填充、边框等以不同的方式呈现 input。您所看到的是 Chrome 如何处理 input 与其容器之间的关系。该容器对于input 来说足够大，但它无法使其足够大以处理填充和边框。换句话说，您只是看到了浏览器之间的渲染差异。
@cristi_b，没有block-inline 这样的东西，所以基本上你所做的与完全删除inline-block 相同。

标签： html css google-chrome

【解决方案1】：

我的猜测是 Chrome 的舍入有问题。

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

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

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

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

【讨论】：

+1，很好的答案。每个浏览器都以不同的方式处理这些事情。对于 Chrome，父容器大小的计算方式显然与元素大小的计算方式不同。
绝对如此。我将 99% 更改为 100%，现在可以了。谢谢。

【解决方案2】：

overflow:auto 如果内容被剪切，则强制滚动条。您的 width: 15em 输入导致内容被剪裁，从而迫使滚动条出现。

【讨论】：

为什么会强制剪切内容？如果 15em 剪辑内容，那么 14em 肯定不会 - 对吧？错了，把 15em 改成 14em 你会看到同样的效果。
我觉得问题其实出在 display: inline-block 上，如果你把这个改成 display: inline 应该就能解决问题了。
在 11em 处停止剪辑。
那么，剪辑区域大小是15em-11em=4em？那为什么从滚动条来看只有几个像素呢？顺便说一句，我也可以更改字体设置，问题就消失了。
@mark，这是 Chrome 如何处理您的特定情况的问题。所有浏览器都不是由同一个人创建的......每个浏览器都会有一些差异或错误。

【解决方案3】：

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

overflow: auto;

你也可以留下它并为 div 添加一个明确的宽度：

width: 100%;

或将 div 设为块级元素

display:block

基本上，您永远不应该将block 级别元素放在inline-block 级别元素中。

【讨论】：

为什么自动溢出是个问题？我没有看到任何元素溢出任何东西，在这种情况下 auto 不应该出现任何滚动条。
这就是 chrome 处理其inline-block 级别元素的方式。如果您使用display:block 也可以。按照惯例，您永远不应该将任何 block 级别元素放在 inline-block 元素内（在您的情况下，将 textbox 放在 inline-block div 内）。
input 不被视为块级元素，因此将其放在inline-block 中应该没有错。

【解决方案4】：

我有一个类似的问题，水平滚动框出现在 Chrome 而不是 Firefox。

如果您的网站（像大多数网站一样）不使用水平滚动，您可以通过简单地隐藏 x 轴上的所有溢出来解决此问题，如下所示：

body {
  overflow-x:hidden;
}

注意：或者你也可以在html 标签上设置它。不知道哪个更好。

【讨论】：