添加/删除 CSS 将导致 IE9 增加表格的高度

Question

我在HTML TR中添加了一个鼠标事件，当用户将鼠标移到TR上或移出TR以更改一些CSS颜色时。但是在IE9中似乎有一个问题，每次CSS改变时，表的高度都会不断增加。

注意:只有当水平滚动条出现时才会出现这个问题。

这是HTML。

<div style="width:100%;height:100%;">
    <div class="grid">
        <div class="grid-body">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;">
                <tbody>
                    <tr>
                        <td style="width:3040px;" class="item">
                            <div>
                                Please mouse-over me and out
                            </div>
                        </td>
                        <td class="item">
                            <div>
                                Please mouse-over me and out
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

这是Javascript

$(document).ready(function (){
 $('.item').mouseover(function () {
     $(this).parent().addClass("item-over");
 }).mouseout(function() {
     $(this).parent().removeClass("item-over");
 });
 }
);

这里是CSS设置

 html, body {height:100%}
 body {
     margin: 0; padding: 0 5px;
 }
 div.grid {
     background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden; zoom: 1;
 }
 div.grid-body {
     background: red; border: 0; overflow: auto; width: 100%; position: relative;
 }
 tr.item-over {
     color: #6eadff;
 }

Answer 1

这是另一个可能的修复，似乎也在我的情况下工作。

将任意边距(上、右、下、左或任意组合)设置为"auto"似乎可以解决这个问题。

div.grid-body {
    margin: 0px auto;
}

或:

div.grid-body {
    margin-top: auto;
}

等。

Answer 2

博客文章中建议的另一个可能的修复方法:

div.grid-body {
    min-height: 0%;
}

Answer 3

如果有人来这里寻找一个修复数据表jquery插件，适当的类添加这个修复是:

.dataTables_scrollBody
{
    margin-top:auto;
}

花了一点时间才找到合适的div，所以我想我应该尽量节省一些时间。

Answer 4

我可能已经解决了。

试题:

width: 100%;
display: inline-block;

Answer 5

打开Developer工具，从grid-body的子表中删除table-layout:fixed规则。

Answer 6

通过设置:

<>之前div.grid-body {背景:红色;边界:0;溢出:隐藏;宽度:100%;位置:相对;}之前

代替overflow:auto。也许你更喜欢使用overflow:scroll或visible。并使它作为一个额外的属性触发，只有在IE9的情况下

Answer 7

删除第一个'TD'元素<td style="width:3040px;"。这会有帮助的。

你需要这么大的"td"吗?

Answer 8

只是为了看看

div。网格{背景:# DAE7F6;border: 1px solid #86A4BE;溢出:隐藏;变焦:1;宽度:100%;}

what about this:
    width:100% !important; 

Answer 9

如果你可以改变溢出，试试这个

div。grid-body {背景:红色;边界:0;溢出:隐藏;宽度:100%;位置:相对;}

其他

将您的脚本更改为此(问题在于添加/删除类)

 $(document).ready(function (){
   $('.item').mouseover(function () {
      $(this).parent("tr").css("color", "#6eadff");
     }).mouseout(function() {
      $(this).parent("tr").css("color","#000");
   });
 });

Answer 10

为什么要用JS而不是css呢?即:

.grid-body table tr:hover {background:red}

Answer 11

也许你应该在触发mouseover事件时在变量中"记住"元素的高度，然后在触发mouseout事件时将其设置回该值。

$(document).ready(function (){
 $('.item').mouseover(function () {
     // store the height in a variabile (keep also in mind margins and paddings)
     $(this).parent().addClass("item-over");
 }).mouseout(function() {
     $(this).parent().removeClass("item-over");
     // now set back the original height
 });
 }
);

Answer 12

应该只添加一个固定的高度到表行

表示包含的表行为:<tr height="50px">

你可以看到它在这里工作http://jsfiddle.net/f3TDb/

我假设你没有这样做的div和css:悬停为一个特定的原因?

Answer 13

我意识到我落后了几个月，但这难倒了我昨天发现这个线程。希望我的回答能有所帮助:

是div.grid-body中的overflow: auto把事情搞砸了。你必须将其更改为scroll，可能是:

div.grid-body {
    overflow-x: scroll;
}

如果你不想要垂直滚动条

注意，你必须编码你的js来确定你是否需要一个滚动条，所以你可以设置overflow-x为visible(默认)，如果没有溢出，scroll，如果有，模拟auto。