Bug of hover height increase in ie9 scrollbar

[Abstract]

When we create a table, sometimes the data is too long, the number of columns is too large, and horizontal or vertical scroll bars are required, we generally add a scroll_auto Div to the outer layer of the table and set it:

 
/* CSS document */. scroll_auto {width: 100%; overflow: auto ;}
 

The outer layer of the table

 
<! -- HTML element --> <Div class = "scroll_auto"> <Table> <tr> <TD> ......... </TD> </tr> <TD> ........ </TD> </tr> </table> </div>
 

If it happens that you have set the hover pseudo class for the table or table element (the most common is to move the cursor to the corresponding row in the table and highlight the row) and write attributes in it, congratulations, the bug dedicated to ie9 has appeared. (after testing, this bug has not been fixed until the second version of ie10 preview version is released ).

Bug reproduction address: ie9 bug

The rest is good, but when we move the mouse to the table, the tragedy arises.
In ie9, we can see that every time we promote the hover pseudo class in the table, the Black Block-level element will go down, until it falls to the bottom of the browser window and jumps back to its original position, the cycle begins...

Bug trigger condition:

Tests show that this bug has two conditions:

1. Set overflow: auto for the parent level (overflow-X: auto for accuracy), and the element width exceeds the parent level, causing the horizontal scroll bar to appear.
2. Any child element of the parent element has a hover pseudo class with attribute settings (different from the original attribute)

If the two conditions are met, a bug will occur when you trigger the hover pseudo class in the parent level.

Solution:

Once you know the trigger conditions, you will be able to learn about the natural solution.

The solution based on the trigger conditions is:

1. Set overflow-X: Scroll for the parent level, that is:

 
/* CSS document */. scroll_auto {width: 100%; overflow-X: Scroll; (or overflow-Y: Scroll )}
 

2. Ensure that the elements in the parent class do not exceed the width of the parent class.

3. Ensure that the elements in this parent class do not include the hover pseudo class (this seems unlikely ).

 

Remedies

1. First, give the. scroll_auto outer package an empty tag (any element in the row or block level) {such as an empty DV}

<! -- HTML document --> <div> <Div class = "scroll_auto"> <Table class = "gen_tb" width = "110%"> <tr> <TD> text </TD> </tr> <TD> text </TD> </tr> </table> </div>
 

2. Set a hover pseudo class for scroll_auto.

 
/* CSS document */. scroll_auto: hover {Height: 100% ;}
 

Refresh the page and fix the bug. This method is mainlyHeightCome on, Bagua!