How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?

Question

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

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

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

• 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.

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?

Answer 1

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.

---

Use margin

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%; } 

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.

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).

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.

jsFiddle

---

Use border

Use border which its position is "reserved" before the padding is resetted.

Reserved border

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

Change property that doesn't need re-calculation of position; color

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.

jsFiddle

---

I hope one of these quick fixes work for you.

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