IE 11中的CSS边框重复用于模态

Question

这只发生在IE 11中，我有一个模态表。

更改边框的高度不会改变任何内容。

这是html：

<div class="modalDiv" id="modalDiv" style="left: 587px; top: 213px; width: 450px; height: 530px; display: block; opacity: 1;">
<table class="modalTable" cellspacing="0" cellpadding="0">
    <tbody><tr>
        <td>
            <table width="100%" cellspacing="0" cellpadding="0">
                <tbody><tr>
                    <td class="modalWindowHeader" onmousedown="dragStart(event)">&nbsp;</td>
                    <td class="modalWindowHeaderClose" onclick="closeModalWindow()"></td>
                </tr>
            </tbody></table>
        </td>
    </tr>
    <tr>
        <td class="modalWindowContent">
            <iframe class="modalInnerIframe" id="modalIFrame" src="url" frameborder="0" scrolling="yes" style="height: 100%; visibility: visible;"></iframe>
        </td>
    </tr>   
    <tr>
        <td class="modalWindowBottomBar">
            <table width="100%" height="10" cellspacing="0" cellpadding="0">
                <tbody><tr>
                    <td><img src="gif"></td>
                    <td width="5" class="modaldWindowBottomBarSlider" onmousedown="resizeStart(event)">&nbsp;</td>
                </tr>               
            </tbody></table>
        </td>
    </tr>
</tbody></table>
</div>

这是边界的CSS

td.modalWindowBottomBar {
    background-image: url("gif");
    background-color:silver;    
    height:10px;
    text-align:right;
}

Answer 1

此答案基于评论中提供的其他信息以及对相关网站的访问权限。这些详细信息和网站访问权限可能在将来不再出现。

您在Internet Explorer中遇到过布局错误。通过将<tbody>元素的高度设置为99%，Internet Explorer将忽略应用于其他元素的显式高度，从而导致单元格变大，从而显示重复的背景。

我已将您的标记和样式煮沸至以下内容：

<table>
    <tbody>
        <tr><td>a</td></tr>
        <tr><td>b</td></tr> 
        <tr><td>c</td></tr>
    </tbody>
</table>

table, td {
    background: #7777FF;
    border: 1px solid black;
}

table { height: 200px; }
tbody { height: 99%;   }
td    { padding: 10px; }

tr:first-child td, 
tr:last-child  td { 
    height: 10px;
}

当您在Chrome和Internet Explorer中查看上述内容（visit fiddle）时，您会看到类似于以下内容的表格。左侧示例（绿色）是Chrome，右侧示例（蓝色）是Internet Explorer。

在两种浏览器中，<tbody>的高度为99%。将鼠标悬停在蓝色表格后，我们会将height重置为auto，以修复布局。这也是您的问题的解决方案 - 只需删除将高度设置为99%的指令，这应该为您解决问题。 或者，您可以改为set your heights on the table-rows。

在我结束时，我将在此处提交一个互操作错误，并与团队讨论有关未来版本的Internet Explorer的解决方案。理想情况下，你不应该遇到这样的问题，所以我会尽力确保在这种情况下我们的行为与其他浏览器一样。