15070

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

Recommend

  • What is equivalent of VB6.0's MaskColor property in C#
  • Problem with Windows Phone ComboBox Style
  • Hide UIView starting from Bottom on Scroll
  • Use WPF object to 'punch' hole in another?
  • How to adjust CSS to display correctly in IE 6?
  • Will jQuery ever leverage HTML5 technologies?
  • Give wx.StaticBitmap a transparent background? wxpython
  • Moving Google Chart column annotation position
  • removing the default blue color on focus
  • Function JavaScript : on Menu CSS HTML
  • Select inner HTML item in CSS
  • How to add closing tag for canvas in three js rendered Canvas?
  • Enumerating Controls on a Form
  • Cut the background to expose the layer below
  • order post according to custom array position
  • AndEngine Applying Transparancy to AndEngine View
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Blackberry - Custom EditField Cursor
  • Google Custom Search with transparent background
  • Avoid links criss cross / overlap in d3.js using force layout
  • Body moving without any force applied? (Box2d)
  • Repeat a vertical line on every page in Report Builder / SSRS
  • CSS Linear-gradient formatting issue accross different browsers
  • Change JButton Shape while respecting Look And Feel
  • What is the “return” in scheme?
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How to make Safari send if-modified-since header?
  • jquery mobile loadPage not working
  • How to pass list parameters for each object using Spring MVC?
  • php design question - will a Helper help here?
  • AngularJs get employee from factory
  • JTable with a ScrollPane misbehaving
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Android Google Maps API OnLocationChanged only called once
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • JaxB to read class hierarchy
  • UserPrincipal.Current returns apppool on IIS