...">
Geek Answers Handbook

What makes the horizontal scrollbar appear in Chrome in the next most trivial HTML?

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; }

Result in Chrome:

enter image description here

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

Note that neither FF nor IE9 show this scrollbar.

Can someone enlighten me, please, what's going on?

EDIT

Removed input borders, indents and fields - http://jsfiddle.net/XBvWb/41/

+7
source share
4 answers

I assume Chrome has issues with rounding.

If you use any px value for the input width, the scrollbar disappears. The same thing when you resize the input font to 100% (which is 13px in this example).

The current input width is 15 * 99% * 13px = 193.05px

I think .05px allows a scrollbar to appear.

This also explains why the scrollbar disappears for a width of about 11 microns. It just rounds off, since Chrome might work better.

+8
source

The following line causes an additional scrollbar:

 overflow: auto;

you can also just leave it and add an explicit width to the div:

 width: 100%;

or make div a block level element

 display:block

Basically, you should never enter a block level element inside an inline-block level element.

+1
source

overflow: automatically picks up the scroll bar if the content is cropped. Your width: 15 m at the entrance causes the content to be truncated, resulting in a scrollbar.

+1
source

I have a similar problem when a horizontal scroll block appears in Chrome, but not Firefox.

If your site (for example, most sites) does not use horizontal scrolling, you can fix this problem by simply hiding all overflow on the x axis as follows:

 body { overflow-x:hidden; }

Note: or you can set it in the html tag. Not sure which is better.

0
source

More articles:


All Articles