gpt4 book ai didi

html - 是什么导致水平滚动条在以下最琐碎的 HTML 中出现在 Chrome 上?

转载 作者:太空狗 更新时间:2023-10-29 14:06:21 26 4
gpt4 key购买 nike

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/

最佳答案

我的猜测是 Chrome 在四舍五入方面存在问题。

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

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

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

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

关于html - 是什么导致水平滚动条在以下最琐碎的 HTML 中出现在 Chrome 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14186277/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com