Question:

It seems I've stumbled on an annoying <strong>Internet Explorer 11</strong> 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: <a href="http://jsfiddle.net/xx4Z4/" rel="nofollow">http://jsfiddle.net/xx4Z4/</a>

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

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

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?

Answer1:

Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the <a href="http://jasongaylord.com/Media/Default/WindowsLiveWriter/ReviewNewDeveloperToolsinInternetExplore_13F97/image_6.png" rel="nofollow">layout</a>. 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 <em>why</em> this happens. But if you really want to fix these you might want to use these quick fixes.

<hr /><h2>Use margin</h2>

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.

<strong>Why not?</strong><br /> 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.

<a href="http://jsfiddle.net/xx4Z4/2/" rel="nofollow">jsFiddle</a><br />

<hr /><h2>Use border</h2>

<em>Use border which its position is "reserved" before the padding is resetted.</em>

<strong>Reserved border</strong><br />

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

<strong>Change property that doesn't need re-calculation of position; color</strong> <br />

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.

<a href="http://jsfiddle.net/xx4Z4/3/" rel="nofollow">jsFiddle</a>

<hr />

I hope one of these quick fixes work for you.

I see you sended a <a href="https://connect.microsoft.com/IE/feedback/details/809874/ie-11-table-cell-padding-collapses-on-hover" rel="nofollow">bug report to MS</a>. Keep us up-to-date when you get a reply, i would appreciate it :)

Answer2:

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>

Answer3:

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

<pre class="snippet-code-css lang-css prettyprint-override">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.

Answer4:

We had a <a href="https://stackoverflow.com/questions/25977850/is-there-a-workaround-for-the-ie11-table-cell-padding-bug" rel="nofollow">similar scenario</a> 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.

Answer5:

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.

Answer6:

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.