3

何らかの理由で、スクロールのある div 内の TH でホバー セレクターを使用すると、親 div のサイズが変更されます。マウス オーバー効果がトリガーされるたびに、div が 1 行ずつ大きくなります。

これを他のブラウザでテストしましたが、IE 9 でしか再現できません。これを解決する方法はありますか?

<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>
4

4 に答える 4

4

次を追加する必要があります。

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

詳細はこちらのリンクをご覧ください

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

于 2013-02-08T09:51:02.290 に答える
2

それはバグの中でほとんど美しいです！ただし、スタイルを次のように変更すると、問題が解決するはずです。

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

コメントで証明されているように、これは単純な修正よりもはるかに複雑です。これは、IE9 が何かを壊したことに関係しているようです - これは IE8 では問題なく動作します。

この質問をチェックしてください：IE9にIE8をエミュレートするように強制します。可能？

これにより、メタタグを次のように変更できます。

<meta http-equiv="X-UA-Compatible" content="IE=8" >
于 2012-11-15T16:47:31.850 に答える
1

設定された高さを使用するというアドホックギークの提案を取り入れて、これを行いました。オブジェクトに ID を与え、ロード時にこの JQuery を実行しました。ハッキーに感じますが、今のところ機能します。スクロール バー用のスペースを確保するために、30 を追加する必要がありました。

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

また、これを引き起こしているものは何でもIE10で解決されています。

高さをそれ自体に設定すると、問題は修正されます

$("#testScroller").height(($("#testScroller").height()))
于 2012-11-15T18:20:35.010 に答える