Table Cells Height Calculated Differenly in Ie11

Table Row Inconsistent Height - Cells With No Content and contenteditable:true Have Different Height

For anyone else experiencing this problem, it turns out, adding:

td {
  vertical-align: initial;
}

fixed it.

The td's were using the user-agent stylesheet's vertical-align property which was causing the problem.

IE display: table-cell child ignores height: 100%

Unfortunately, the effect of percentage values for height on display: table-row and display: table-cell elements is undefined according to the spec:

CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values.

So while a browser may claim to offer full support for table layout, certain aspects such as percentage heights may not be consistently implemented across all browsers because there is no correct behavior. You could try raising an issue on Microsoft Connect in hopes that they will change the behavior to be interoperable, but in the meantime you will need to find a different workaround (and even then you can't guarantee the behavior will remain interoperable, even in other browsers).

To make matters worse, I just tested and this affects all versions of IE up to and including 11, which means an IE-specific hack will fall short here. If you need to use a CSS table layout, as evidenced by the fact that you need to support IE8, then a pure CSS workaround is probably not feasible.

Issue with IE11 multi-height TH and positioning of pseudo elements

Okay, I was constantly trying out different methods to use ::after and position it correctly and it looks like none of the methods worked in Internet Explorer 11. So finally I decided using three separate images for the background and positioning it as required.

Here's my updated snippet if someone would use it.

* {font-family: 'Segoe UI';}.arrow {border: 1px solid #ccc; padding: 5px; line-height: 1; color: #fff; cursor: pointer; padding-right: 20px;}.arrow-normal {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAA6klEQVQoU3WQzQqCQBSFB4IW9VKtosCaUKwQbOkL+CBuRHAnLlz4BG16BRci7spNgeJGysofou41jTT64DLMOefOzB3yDcMw0ziO95TSUS21AWN2AZ4ALGeO48a19YZl2cUdwEBDmqaXT1AQhFWWZUXttYATr6IoUuI4zg66zmEYHqMoOjWFe9TRJzzP92VZHkqSNOgW6ugT27Z7nuf1/xX6xHXdLVwfF0URdOqAuu/7W6IoyuYBVC/tUJZlbhjGsppQ1/U1dLYmzPP8ZlnWvAo0aJrGw1fcMIDrT6BBVVWaJElgmuaklgBCXtrc+nqGz49JAAAAAElFTkSuQmCC") right 5px center no-repeat #00f;}.arrow-up {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAfklEQVQYV2NABj4+Pp6vX7++6+/v7wAVQgVACd/PQPAfCIDUp+DgYDeoFAQEBQUFfAcCkAIY+PLly2e4wqioqPAfP378gsqhAKCJX2NjY/0Zzp07txeo69OLFy+evHz58ikMg/ggcZA8Q2hoKFtxcTF3WloaFzoGiYeGhrIBANcmc5DiPaghAAAAAElFTkSuQmCC") right 5px center no-repeat #00f;}.arrow-down {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAfUlEQVQYV2NYtWoV85UrV9hwYZA8w6VLl3b8////9a9fv+6j4Xsg8WvXru1g6O/vj/sLBEABDPD79++fCxYsCGMAgZkzZ0YAdf6CyoHBz58/vy1btswPrAAGpk2bFvrjx49vIAUgGkMBDEyZMsX/w4cP9xctWuQBFQICBgYAx8mG6/gP36QAAAAASUVORK5CYII=") right 5px center no-repeat #00f;}

<table>  <thead>    <tr>      <th class="arrow arrow-normal">Two Line<br />Column</th>      <th class="arrow arrow-up">Single</th>      <th class="arrow arrow-down">Three<br />Line<br />Column</th>    </tr>  </thead>  <tbody>    <tr>      <td>Item 1</td>      <td>Item 2</td>      <td>Item 3</td>    </tr>  </tbody></table>

IE vertical centering bug with table-cell parent and absolutely positioned pseudo-element

The issue seems to be with how IE is calculating the heights of the cells. Their heights seem to be based on the height of the contents, not the element itself. So I moved the relative positioning to the list itself as its intrinsic height should be consistent:

.progress-bar {
  display: table;
  table-layout: fixed;
  width: 100%;
  position: relative;
  counter-reset: progressBar;
}

Then I positioned the check in a slightly different manner using your top offset of 50%, but leaving the left offset to “auto” and using negative margins to move it into place (since they have better backward-compatible support than transform), but that choice is up to you:

&:before {
  content: "✓";
  color: green;
  display: block;
  position: absolute;
  top: 50%;
  margin-top:-.5em;
  margin-left: -1em;
}

I hope this helps.

Here’s the Codepen fork: http://codepen.io/aarongustafson/pen/PwPxEp

IE :before/:after 100% height issues on td

Resolved: This issue has been resolved in current preview builds of Internet Explorer on Windows 10. You can presently test this from Windows, or Mac OS X via http://remote.modern.ie. If you require IE 11 (and below) support, the proceeding solution should still suffice for you.

Generally speaking, table cells have their dimensions determined largely by their content. In this case, we can see that the pseudo-element results in being equally as tall as the neighboring content within the shared cell container. This is what Internet Explorer understands 100% to mean.

Your pseudo element is positioned absolutely, and constrained by the relatively positioned table cell. It stands to reason then that we would expect the pseudo element to be as tall as the constraining element, rather than the height of its neighboring content. Internet Explorer appears to be making a mistake in judgment here.

If you'd like the same presentation across all browsers, I would suggest the following changes:

Avoid using pseudo elements here, and instead use actual elements (see below)
Cycle over your elements sizing them to their parent element's offsetHeight

So your markup would look like this:

<td class="testTD">
    <span class="bar"></span>
    <!-- content -->
    <span class="bar"></span>
</td>

You would then style them accordingly as you did the original pseudo elements:

.testTD .bar:first-child,
.testTD .bar:last-child {
    display: block;
    background: #F00;
    width: 15px; height: 100%;
    position: absolute; top: 0; z-index: 1;
    box-shadow: -15px 0 15px -15px grey inset;
}

.testTD .bar:first-child {
    left: -15px;
}

.testTD .bar:last-child {
    right: -15px;
}

In Chrome and Firefox you are already set. You don't need to do anything further. However, in Internet Explorer you will need to manually set the heights of these elements. For this reason, we'll condition the following script on the presence of a documentMode property on the document object:

(function () {

  "use strict";

  if ( document.documentMode && document.documentMode < 12 ) {
      var spans = document.querySelectorAll( "span.bar" ),
          count = spans.length;
      while ( count-- ) {
          spans[count].style.height = spans[count].parentElement.offsetHeight + "px";
      }
  }

}());

The end-result should be consistent across all major browsers.

I will file a bug on this internally on interop grounds. If Chrome and Firefox are behaving one way, and Internet Explorer is behaving another, our team should consider the reasons for this being so. I'll add this question to the ticket I open and be sure to update this answer as necessary.

Update following discussion in comments

It was noted in the comments that the original markup could not be changed in this particular case. Scripting was correctly identified as a possible solution here.

(function () {

    "use strict";

    // Get target cells, and create clone-able span element
    var tds = document.querySelectorAll( ".testTD" ),
        span = document.createElement( "span" );
        span.className = "bar";

    // Cycle over every matched <td>
    for ( var i = 0; i < tds.length; i++ ) {

        // Create references to current <td>, and a(fter)/b(efore) clones
        var t = tds[i], a = span.cloneNode(), b = span.cloneNode();

        // Insert cloned elements before/after <td> content
        t.appendChild( a );
        t.insertBefore( b, t.firstChild );

        // If the user is in Internet Explorer, avoid table-cell height bug
        if ( document.documentMode && document.documentMode < 12 ) {
            a.style.height = b.style.height = t.getBoundingClientRect().height + "px";
        }

    }

}());

If you're using jQuery, this could be written more concisely:

(function () {

    "use strict";

    // Create our clone-able element
    var span = $("<span></span>").addClass("bar");

    // Add cloned <span> elements at beginning/end of all .testTD cells
    $(".testTD").prepend( span.clone() ).append( span.clone() );

    // If the user is in Internet Explorer, avoid table-cell height bug
    if ( document.documentMode && document.documentMode < 12 ) {
        $(".testTD .bar").height(function () {
            return $(this).parent().outerHeight();
        });
    }

}());

how fix bug with white lines between the cells of the table in IE11

That's an IE bug, that happens when using the following CSS styles:

border-radius
border-bottom-left-radius
border-bottom-left-radius
border-top-left-radius
border-top-right-radius

As a workaround, try turning on IE10 mode on your browser by adding the following metatag <meta http-equiv="X-UA-Compatible" content="IE=10" /> to your page, or try disabling quirks mode with the following page declaration <!DOCTYPE html>

Source

Strange behavior of vertical-align on table cell when cell contents are very small

I can give you a workaround, but couldn't explain it properly. I think the problem is different type of children element inherits the vertical-align rule differently, i.e. inline and block. A workaround would be make the <button> to be block, same as the <div>.

button {
  display: block;
}

If you need further pixel perfect tweaking, you can also add:

.text {
  line-height: 1;
}

That makes it looks all the same on both Firefox and Chrome.

Demo here http://codepen.io/anon/pen/NPzaLg