CODEWITHSUNDEEP
htmlcssinternet-explorer
Michael
Michael

Reputation: 2038

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:

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?

Upvotes: 22

Views: 38968

Answers (6)

ioCron
ioCron

Reputation: 963

Strange, no one mentioned to set table-layout:fixed; It's really important, otherwise the padding/width won't be calculated correctly on IE (and some other weird side-effects, depending on the use case), especially when you are using images inside it.

<style>
  .table { display:table; table-layout:fixed; }
  .table-cell { display:table-cell; }
</style>

<div class="table">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>

Upvotes: 4

tomasz86
tomasz86

Reputation: 919

Adding invisible top and bottom borders seems to fix the problem.

a {
  border: solid rgba(0,0,0,0);
  border-width: thin 0;
}

This prevents the anchors from moving on hover or focus.

I use rgba(0,0,0,0) instead of transparent for better compatibility with old IE which displays transparent in colour while rgba is rendered invalid and not displayed at all.

Upvotes: 1

Web-X-Plorer
Web-X-Plorer

Reputation: 1

These are all really good answers, and the media query option works well to identify only IE which has this problem with display:table-cell

What I did that I found worked well was employ vertical-align as a great way to direct the text contained within the display:table-cell element to where I wanted it to reside. Usually vertical-align doesn't do much to formatting, UNLESS it is in a table.

Here is my simplified HTML:

<li id="table-cell-element">
   <a href="#">
      <img src="event.png"/>
      <small>Register for Event</small>
   </a>
</li>

And here is the CSS:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    li {vertical-align:middle; display:table-cell; width:15%; font-size:1.2em; line-height:1.2em; padding:2%; margin:0;} 
    li a {display:inline-block;} 
    li img {display:inline-block; vertical-align:middle; padding-right:5px; float:left; max-with:30px;}
    small {display:block; font-size:60%; font-weight:bold; color:#333;}
}

You may also have to adjust the li a:hover {line-height} depending on what is in your CSS for those elements

Also, if you want this to work for IE 9 and below I suggest using conditional comments that add an "ie" class to the <html> tag and then create an IE9 style sheet. Thankfully the styling required for IE9 is relatively the same. But I only tested through IE9 and I am uncertain of your results for IE8 and IE7.

Upvotes: 0

Andreas
Andreas

Reputation: 2376

This can be "helpfully" solved by setting the paddding css-rules like this ->

element:hover,
        element:active,
        element:focus  {
            // padding example
            padding-left: 1.5%;
        }

Rememeber to set this only for IE since it can make all normal browser behave like a disco.

EDIT: Flexbox works for IE 10 and above so this "solution" is only needed for ie 9 and below.

Upvotes: 0

Richard Tinkler
Richard Tinkler

Reputation: 1643

We had a similar scenario where none of the solutions above worked.

Instead we animate the width of our affected div after the page has loaded:

if (!!navigator.userAgent.match(/Trident\/7\./)){
            $("#karina-rosner2").animate({'width': '20.1%'},1);     
            $("#karina-rosner2").animate({'width': '20%'},1);   
}

This forces IE11 to recalculate the div's relative padding value and solved our problem well.

Upvotes: 0

nkmol
nkmol

Reputation: 8091

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

Upvotes: 15

Related Questions