Report a very strange issue of the IE scroll bar -- the scroll bar is abnormal when the percentage calculation width is floating point.

Report a very strange issue of the IE scroll bar -- the scroll bar is abnormal when the percentage calculation width is floating point.

Cause:

During project creation, a table with more content than the DIV container is automatically rolled horizontally. Other browsers are normal, but the scroll bar appears when the table and the DIV width of the container are consistent under IE.

　　

I finally found the reason for my experiments for a long time. This is because the percentage calculated by IE browser is not an integer.

 

Instance 1: If the percentage calculation result is an integer, the display is normal.

<! DOCTYPE html> 
. Width of scroller =. The panel width is * 75%; the result is 750, which is an integer and the width of. inner is the same. Display normal
　　
Instance 2:If the percentage calculation result is not an integer, an exception is displayed.
    .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. panel to 1001px. The width of. scroller is * 75%, and the result is 750.75px. But in fact, the minimum unit of pixels is 1px, so the. scroroller width is 751px. The. inner is also 751. It is reasonable to say that horizontal scroll bars should not appear, but IE has
　　
Is IE Set to 750px for. scroroller? With this question, set. inner to 750px, And Then zoom in the page to see that the margin gap between. scroler and. inner is obvious, so there is no error in the width of. scroller is 751px. See
　　
In addition, we found that the height of the. scroller will also affect whether the scroll bar is displayed. When the height of scroller is 34 -,
　　
The scroll bar is displayed when the height of. scroller is 35 +.
I had to talk about the wonderful IE browser.
The scroll bar problem also occurs in IE9 +, but the improvement is irrelevant to the height of. scroller.
　　
Therefore, we estimate that IE will compare the calculated floating value when judging whether the scroll bar is displayed, rather than the actually displayed value.
Imagine that for IE browser, the current. scroller calculation width is 750.75px. What if we set. inner to a floating point number?

The test result is set as long<751Will not display any floating point.
　　
Therefore, note:When the width of the parent container is calculated to set the width of the sub-label to equal width, you can directly set the floating point value width of the parent container.. This is a convenient method compatible with various browsers.
 
Question: When the browser window is scaled (ctrl + scroll wheel), each browser will display a scroll bar when the width of the parent container is a floating point. This is a problem of distortion caused by scaling, inevitably, it has nothing to do with this case.

If you think this article is good, click [recommendation] in the lower right corner ]!