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相反。

在我这边，我将提交一个关于此的互操作错误，并与团队讨论 future 版本的 Internet Explorer 中的解决方案。理想情况下，您不应遇到此类问题，因此我会尽力确保我们在此类情况下的行为与其他浏览器一样。