Question

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上的结果：

enter image description here

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

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

有人可以开导我，请问，发生了什么事？

修改

删除了输入边框，填充和边距 - http://jsfiddle.net/XBvWb/41/

Answer 1

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

如果对输入宽度使用任何px值，滚动条将消失。将输入字体大小更改为100％（在此示例中等于13px）时相同。

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

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

这也澄清了为什么滚动条消失了大约11em的宽度。它只是以Chrome可以更好地处理的方式进行整理。

Answer 2

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

overflow: auto;

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

width: 100%;

或使div成为块级元素

display:block

基本上你永远不应该在block级元素中放置inline-block级元素。

Answer 3

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

Answer 4

我遇到类似的问题，其中水平滚动框出现在Chrome中但不出现在Firefox中。

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

body {
  overflow-x:hidden;
}

注意：或者您也可以在html标记上进行设置。不确定哪个更好。

是什么原因导致水平滚动条在Chrome中显示在以下最简单的HTML中？

4 个答案: