Ie 10 Bug with Display Table CSS When Height Is 100%

IE 10 bug with display table CSS when height is 100%?

After spending a few days on this question, it seems that for this specific layout (especially the 100% height), using tables is the best option. Those 3 different threads with different twist of the question were unable to get results (so I suspect that this IE bug is one reason to keep using tables in 2014):

IE 10 bug with display table CSS when height is 100%?
Header/Footer Layout with 100% Content Height in IE8
Tableless Table Layout in IE8

By reading more about tables and SEO, I was also unable to find any relevant information or tangible data that using a single table would have any impact at all. The only tangible information I was able to find is that tables will only display once the full HTML has been downloaded in the client. Which again is not a big issue in 2014 considering the HTML's size in the overall size of a web page. CSS can be used for all of the table's style which solves some of the other complains I saw about tables. This article probably reflects best the situation here:

http://olav.dk/articles/tables.html

Tables in 2014 might be ok :)

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.

height:100% inside table-cell not working on Firefox and IE

For height:100% to work, all parent containers must be height:100%. If you notice, your .table-cell styles do not have height:100%.

Adding this style fixes the issue in Firefox:

.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
    height:100%;
}

As an alternative, adding the image to your HTML rather than as a CSS background-image might also work.

body, html {    margin:0;    padding:0;    height:100%;}.table {    display:table;    width:100%;    height:100%;}.table-cell {    display:table-cell;    vertical-align: middle;    width:100%;}.content {    height: 100%;    display: block;    overflow: hidden;    position: relative;    background-size:cover;}
.content img {    width:100%;    height:100%;}

<div class="table">    <div class="table-cell">        <div class="content">            <img src="http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg"/>        </div>    </div></div>

Content of element not 100% in IE10 inside of equal height columns

This seems to be a bug: Make a DIV fill an entire table cell

I would recommend using display: flex; instead; the HTML is much more concise.

Fiddle: http://jsfiddle.net/GXe9m/2/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edit: maybe this is not a bug: https://code.google.com/p/chromium/issues/detail?id=97959 After trying the flexbox it seems children elements can still not stretch to height: 100%; in some browsers, one way to fix it is position: relative; on the parent and position: absolute; on the child: http://jsfiddle.net/GXe9m/3/ Another way, though probably not the best is to use the display: flex; rules on the first column as well as on the row.

Bug in Internet Explorer 10 with flexbox in table

looks like max-width or width is needed too. http://codepen.io/anon/pen/wGgWWW

DISCLAIMER: only tested via the devellopper tools and not a real IE10

.a{  display: flex;   width:50%;  background:red;}span {  display:inline-block;  max-width:100%;}

        <div style="width: 50%; background-color: grey;">            <div class="a" >                <span >Text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long very long text very long text very long text very long text very long text very long text very long</span>            </div>        </div>

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();
        });
    }

}());

IE10 line-height bug with display:inline-block; and overflow:hidden;

CSS 2.1 says

The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow, unless it has either no in-flow line boxes or if
its 'overflow' property has a computed value other than 'visible', in
which case the baseline is the bottom margin edge.

which is exactly what IE10 is doing.

And Firefox and Opera are doing the same thing.

It's not IE that's bugged, it's Chrome, which is not following the above rule correctly.

CSS display: table min-height not working

When using tables, height essentially is min-height, as tables always stretch. Just get rid of the "min-" and it will work as you expect.

height: 100% for div inside div with display: table-cell

When you use % for setting heights or widths, always set the widths/heights of parent elements as well:

.table {    display: table;    height: 100%;}
.cell {    border: 2px solid black;    vertical-align: top;    display: table-cell;    height: 100%;}
.container {    height: 100%;    border: 2px solid green;    -moz-box-sizing: border-box;}

<div class="table">    <div class="cell">        <p>Text        <p>Text        <p>Text        <p>Text        <p>Text        <p>Text        <p>Text        <p>Text    </div>    <div class="cell">        <div class="container">Text</div>    </div></div>

IE 10,11,Edge Table Cell height varies inside div with overflow-y: auto

i solved the issue by applying a height: 100% on all td elements

solution

    <html >
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <table>
        <tr>
            <td>
                <div class="container" >
                    <table class="table">
                        <tbody>
                            <tr>
                                <td>
                                123456
                                </td>
                                <td>
                                    123456789 12311 12 123456789 12311 12 123456789 12311 12 123456789 12311 12
                                    123456789 12311 12 123456789 12311 12 123456789 12311 12 123456789 12311 12
                                    45454 4545 4546 4546 654654 654654 654654 6546
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12 
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                            <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                             <tr>
                                <td>
                                asd
                                </td>
                                <td>
                                    123456789 12311 12
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Ie 10 Bug with Display Table CSS When Height Is 100%