table 中的边框未显示在 IE11 中，用于角部带有三角形的 tds

Question

td {
    padding: 20px;
}
.note {
    position: relative;
}
.note:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
 width: 0; 
 height: 0; 
    display: block;
 border-left: 20px solid transparent;
 border-bottom: 20px solid transparent;
 
 border-top: 20px solid #f00;
}

<table border="1">
    <tr>
        <td class="note">Triangle!</td>
        <td>No Triangle!</td>
    </tr>
</table>

使用 angular 和工具提示，我指示悬停字段 -td 的三角形，但是相应 td 或 tr 的边界在 chrome、mozilla 中正常，但在 IE11 中不正常。

Answer 1

您提供的代码在 IE11 中工作正常，但在 IE7 中不工作。

问题是IE正在进入IE7兼容模式。

这通常发生在您运行在本地编写代码并进行测试时。有一个 IE 设置告诉 IE 对本地 Intranet 站点使用兼容模式。此设置适用于需要升级 IE 但不想更新依赖旧版本的系统的企业。

您可以通过将 x-ua-compatible 元标记添加到您的 HTML 代码来修复它，或者只需更改浏览器中的相关配置设置即可。

table 中的边框未显示在 IE11 中，用于角部带有三角形的 tds

borders in table not showing up in IE11 for tds with triangle at corner

html

css

angular-ui-bootstrap