我如何解决与表格单元格,文本修饰和填充相关的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问题.我看到百分比填充甚至没有计算,也没有在布局中应用.但是,文本仍然根据填充百分比填充.所以我假设文本是用填充定位的,但是在定位之后,百分比填充被"禁用".

我无法告诉你为什么会这样.但如果您真的想要解决这些问题,您可能需要使用这些快速修复程序.

使用保证金

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

span 
{
    margin-left: 10%;
}

并且当然重置边的填充:

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

这种"解决方案"不像表格单元本身的百分比填充那样动态.

为什么不？
这是因为百分比取值是它的父元素table-cell的值.表格单元格确实根据表格获取百分比值.现在你什么时候使用left-margin: 5%;.它应该是应有的一半空间.这是因为它占用了表格单元宽度的10%.表格单元格宽度是由其单元格(table width / table cell)划分的表格宽度.

所以要确定我做了5倍的细胞数量(5 * 2在这种情况下),这将导致正确的百分比.

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

的jsfiddle

使用边框

在重置填充之前使用其位置为"保留"的边框.

保留边框

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

更改不需要重新计算位置的属性; 颜色

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

现在请注意,布局中仍然没有填充.只要分配了一个属性,该属性在填充确定之前尚未计算(同时确定文本位置),将重新计算位置.

的jsfiddle

我希望其中一个快速修复功能适合您.

我看到你向MS发送了一个错误报告.当你得到答复时让我们保持最新,我会很感激:)