Michael Michael - 7 months ago 24
HTML Question

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

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

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

Comments