7

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/

4

4 回答 4

10

我的猜测是 Chrome 存在舍入问题。

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

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

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

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

于 2013-01-06T20:44:04.097 回答
1

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

overflow: auto;

您也可以保留它并为 div 添加显式宽度：

width: 100%;

或使 div 成为块级元素

display:block

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

于 2013-01-06T20:18:45.323 回答
1

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

于 2013-01-06T20:22:48.667 回答
0

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

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

body {
  overflow-x:hidden;
}

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

于 2016-04-06T06:43:25.367 回答