Cause:
Do a project when done a table content over div container automatic horizontal scrolling processing. Other browsers are normal, but under IE, the table table and the container div are the same width but the scroll bar appears.
Then I did the experiment for a long reason finally found, is the use of the percentage of Internet Explorer to calculate the width of the value is not caused by integer values.
Example 1: The use of percentages to calculate the result is an integer that is displayed normally.
<!DOCTYPE HTML> <HTML> <Head> <MetaCharSet= ' Utf-8 '> <title>IE8 Flower scroll Bar Problem Example</title> <styletype= "Text/css"> * {-webkit-box-sizing:Border-box;-moz-box-sizing:Border-box;box-sizing:Border-box; }. Panel{width:1000px; }. Scroller{Overflow-x:Auto;width:75%;Background-color:#f00; }. Inner{width:750px;Height:10px;Border:1px solid #ddd;Background-color:#ff0; } </style> </Head> <Body> <Divclass= "Panel"> <Divclass= "Scroller"style= "height:35px;"> <Divclass= "inner"></Div> </Div> </Div> </Body> </HTML>
The width of the. scroller width =.panel *75%; The result is 750, which is an integer, and the width of. Inner is the same. Show Normal
Example 2: displays an exception if the result is a non-integer using a percent calculation.
. panel{ Width:1001px; } . scroller{ Overflow-x:auto; Width:75%; Background-color: #f00; } . inner{ Width:751px; height:10px; border:1px solid #ddd; Background-color: #ff0; Set the. Panel to 1001px, then the width of the. Scroller =.panel width *75%, the result is 750.75px. But in fact the minimum pixel unit is 1px, so. Scroller width is 751px. and. Inner is also 751. It should be said that there should be no horizontal scroll bar, but IE has appeared
is IE to. scroller set to 750px? with this question, set the. Inner to 750px, and then enlarge the page to see. The margin gap between Scroller and. Inner is obvious, so. Scroller the width of the display is 751px without error. See
And when testing under the IE8 browser, it is found that the height of the scroller also affects whether the scroll bar is displayed. When the height of the. Scroller is 34-the time is as follows
Scroll bars are displayed when the. Scroller height is 35+.
Have to spit slot ie browser of the wonderful.
There will also be a scrollbar problem on the ie9+, but the improvement is irrelevant to the height of the. scroller.
So we estimate that when the browser determines whether the scroll bar is displayed or not, it takes a comparison of the calculated floating values rather than the actual displayed values .
So imagine, for IE, now. The scroller has a width of 750.75px, and if we give. Inner also set as a floating-point number?
The test result is that any floating-point number that is set <751 does not display a scroll bar .
So, note : when we calculate the width of the parent container to be equal to the width of the child label, set the width of the parent container's floating-point value directly . This is the most convenient way to be compatible with each browser now.
Digression: In the browser window zoom (Ctrl + mouse wheel), each browser in the parent container width is a floating point when the scroll bar, this is the scaling caused by the problem of distortion, unavoidable, but also not related.
If you feel this article is good, please click on the bottom right "recommended"!
Report an IE very wonderful scroll bar problem--percent calculates the scroll bar display exception when the width is a floating point number
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
