Menu
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;
}
The result on Chrome:
The jsFiddle - http://jsfiddle.net/XBvWb/18/
Note that neither FF nor IE9 show this scrollbar.
Can anyone enlighten me, please, what is going on?
EDIT
Removed the input border, padding and margin - http://jsfiddle.net/XBvWb/41/
720
My guess is that Chrome has a problem with rounding.
If you use any value of px for the inputs width the scrollbar disappears. Same when you change the inputs font-size to 100% (which equals exactly 13px in this example).
The current width of the input is 15 * 99% * 13px = 193.05px
I think the .05px let the scrollbar appear.
That also clarifies why the scrollbar disappears for widths of around 11em. It just rounds up in manner Chrome can handle better.
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
