问题描述:

For some reason when I use the hover selector on a TH inside a div with a scroll, the parent div resizes. Every time the mouse over effect is triggered the div grows by one line.

I tested this in other browsers but I can only reproduce this in IE 9. Anyone have a way to resolve this?

<html lang="en">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=8; IE=9" />

<style>

.testScroller {

max-width: 200px;

overflow-x: auto;

background-color: green;

}

.testHeader:hover {

background-color: lightBlue;

}

</style>

</head>

<body>

<div class="testScroller">

<table >

<tr >

<th class="testHeader">header 0</th>

<th class="testHeader">header 1</th>

<th class="testHeader">header 2</th>

<th class="testHeader">header 3</th>

<th class="testHeader">header 4</th>

<th class="testHeader">header 5 </th>

</tr>

<tr >

<td >0</td>

<td >1</td>

<td >2</td>

<td >3</td>

<td >4</td>

<td >5</td>

</tr>

</table>

</div>

</body>

</html>

网友答案:

That's almost beautiful in it's bugginess! However, if you change your style to this, it should fix the problem :

.testScroller {
    max-width: 200px;
    overflow-x: auto;
    background-color: green;
}
.testHeader {
    background-color: green;
}
.testHeader:hover { 
    background-color: lightBlue;
}

As evidenced by the comments, this is far more complicated than the simple fix belies. This appears to have something to do with IE9 having broken something - this works ok in IE8.

Check out this question : Force IE9 to emulate IE8. Possible?

Which will lead you to changing your meta tag to this :

<meta http-equiv="X-UA-Compatible" content="IE=8" >
网友答案:

You should add:

.testScroller {
    overflow-x: auto;
    min-height:0%   /* IE9 fix */
}

See this link for details

http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround

网友答案:

Taking adhocgeek suggestion of using a set height I did this. Gave ID to the object and ran this JQuery on load. Feels hacky but it works for now. I needed to add in the 30 to give space for the scroll bar.

$("#testScroller").height($("#testTable").height() + 30);

Also whatever is causing this has been resolved in IE10.

If you set the height to itself the problem is fixed

$("#testScroller").height(($("#testScroller").height()))
相关阅读:
Top