我如何解决这个IE11布局错误相关的表单元格，文本装饰和填充？ [英] How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?

问题描述

似乎我偶然发现了一个恼人的 Internet Explorer 11 布局错误。

It seems I've stumbled on an annoying Internet Explorer 11 layout bug. (Ugh, I thought these days were behind us.)

在下面的示例中，右侧表格单元格中的填充在IE11中悬停时会消失：
http://jsfiddle.net/xx4Z4/

In the following example, the padding on the right table cell disappears when you hover over it in IE11: http://jsfiddle.net/xx4Z4/

这似乎因为一个非常具体的CSS场景：

This seems to arise because of an incredibly specific CSS scenario:

• 元素使用 display：table-cell


• 元素使用基于百分比的填充，例如 padding：0 5％


• 子元素添加 text-decoration：下划线。

• The element uses display: table-cell
• The element uses percentage-based padding, e.g., padding: 0 5%
• A subelement adds text-decoration: underline when the parent element is hovered over

如果你改变这三个东西，问题就消失了。

If you change any of those three things, the problem goes away.

这似乎是一个IE11的错误，但我想知道：这个问题的解决方法，而不放弃 display：table-cell 和基于百分比的填充？

This seems to be an IE11 bug, but I'm wondering: Can anyone think of a workaround for this problem without abandoning display: table-cell and percentage-based padding?

推荐答案

再一次IE11的问题，似乎很不寻常。我发现填充百分比甚至未计算，并且不会应用于布局。然而，文本仍然根据填充百分比填充。所以我假设文本是用填充定位的，但在定位之后，百分比填充是禁用。

Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the layout. However the text is still padded according to the padding percentage. So i would assume the text is positioned with the padding but after the positioning the percentage padding is "disabled".

我不能告诉你这发生。

I can't tell you why this happens. But if you really want to fix these you might want to use these quick fixes.

由于百分比错误只发生在表格单元格的填充上，因此您实际上可以在范围本身上使用边距。

Because the percentage bug only occurs on the padding of a table-cell, you can actually use a margin on the span itself.

span 
{
    margin-left: 10%;
}

和ofcourse重置边的填充：

and ofcourse reset the padding of the sides:

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

这个解决方案不像表上的百分比填充一样动态，细胞本身。

This "solution" is not as dynamic as with percentage padding on the table-cell itself.

为什么不？

这是因为百分比是来自其父元素的值， -细胞。其中表格单元格取它的百分比值基于tabel。现在，当你只需使用 left-margin：5％; 。这将是一半的空间，因为它应该是。这是因为它占用了表格单元格宽度的10％。其中表格单元格宽度是由其单元格（表格宽度/表格单元格）指定的表格宽度。

Why not?
It's because the percentage takes is value from it's parent element, the table-cell. Where as the table-cell did take it's percentage value based on the tabel. Now when you would just use left-margin: 5%;. It would be half of the space as it should be. This is because it take the 10% on the table-cell width. Where the table-cell width is table width devided by its cells(table width / table cell).

所以为了修复我做了5倍的单元格数量（在这种情况下 5 * 2 ）

So to fix that i did 5 times the amount of cells (5 * 2 in this case), which would result in the right percentage.

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

However this is not dynamic when you want to add more cells.

---

在填充位重置前，使用位置为保留的边框。

保留边框

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

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

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

现在请注意，布局中仍然没有填充。

Now note that there will still be no padding in the layout. As soon as a property is assigned which has not been calculated before the padding did reset(the same time the text position is determed) the positions will be re-calculated.

我看到你发布了一个错误报告给MS 。当您收到回覆时，请随时与我们联络，我们非常感谢：）

I see you sended a bug report to MS. Keep us up-to-date when you get a reply, i would appreciate it :)

这篇关于我如何解决这个IE11布局错误相关的表单元格，文本装饰和填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！