html - 我如何解决这个与表格单元格、文本装饰和填充相关的 IE11 布局错误？

Question

我似乎偶然发现了一个恼人的 Internet Explorer 11 布局错误。 (呃，我以为这些日子已经过去了。)

在以下示例中，当您在 IE11 中将鼠标悬停在右侧表格单元格上时，右侧表格单元格的填充消失: http://jsfiddle.net/xx4Z4/

这似乎是由于一个非常具体的 CSS 场景而出现的:

• 元素使用display: table-cell
• 该元素使用基于百分比的填充，例如，padding: 0 5%
• 子元素在父元素悬停时添加 text-decoration: underline

如果你改变这三件事中的任何一个，问题就会消失。

这似乎是一个 IE11 错误，但我想知道:任何人都可以在不放弃 display: table-cell 和基于百分比的填充的情况下想出解决这个问题的方法吗？

Answer 1

又是一个看起来很不寻常的 IE11 问题。我看到甚至没有计算百分比填充，也没有在 layout 中应用。 .但是，文本仍会根据填充百分比进行填充。所以我假设文本是用填充定位的，但在定位之后百分比填充是“禁用的”。

我不能告诉你为什么会发生这种情况。但如果您真的想修复这些问题，您可能需要使用这些快速修复。

---

使用 margin

因为百分比错误只发生在表格单元格的填充上，所以您实际上可以在跨度本身上使用边距。

span 
{
    margin-left: 10%;
}

当然还有重置两侧的填充:

div.table-cell {
    display: table-cell;
    padding: 20px 0;
}

这个“解决方案”不像表格单元格本身的百分比填充那样动态。

为什么不呢？
这是因为百分比是来自其父元素(表格单元格)的值。表格单元格确实采用了基于表格的百分比值。现在，您只需使用 left-margin: 5%;。它应该是空间的一半。这是因为它占据了表格单元格宽度的 10%。其中表格单元格宽度是表格宽度除以其单元格(表格宽度/表格单元格)。

因此，为了解决这个问题，我做了 5 倍的单元格数量(在本例中为 5 * 2)，这将导致正确的百分比。

但是，当您想要添加更多单元格时，这不是动态的。

jsFiddle

---

使用边框

在重置填充之前使用其位置“保留”的边框。

保留边界

span 
{
     border-bottom: 1px solid transparent;   
}

改变不需要重新计算位置的属性；颜色

div.table-cell-bug:hover span 
{
    border-bottom-color: black; 
}

现在请注意，布局中仍然没有填充。一旦分配了在填充重置之前尚未计算的属性(同时确定文本位置)，将重新计算位置。

jsFiddle

---

我希望这些快速修复中的一个对你有用。

我看到你发了一个bug report to MS .当您收到回复时，请及时通知我们，我将不胜感激:)