是什么原因导致水平滚动条在Chrome中显示在以下最简单的HTML中？
mar*_*ark 7 html css google-chrome
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/
我的猜测是Chrome有四舍五入的问题.
如果对输入宽度使用任何px值,则滚动条将消失.将输入字体大小更改为100%(在此示例中等于13px)时相同.
输入的当前宽度为15*99%*13px = 193.05px
我认为.05px让滚动条出现.
这也澄清了为什么滚动条消失了大约11em的宽度.它只是以Chrome可以更好地处理的方式进行整理.