在IE11中表细胞高度计算不同 [英] Table cells height calculated differenly in IE11

问题描述

我遇到的问题是，IE 11似乎在单个< 之间有不一致的< td>

这里是一个说明我的问题的笔：。

  var spans = document.querySelectorAll（span.bar），count = spans.length; while（count--）{spans [count] .style.height = spans [count] .parentElement.offsetHeight +px ;}  

  body {padding：15px;} table {border ：1px实心黑色; border-spacing：10px; cell-spacing：0; } tr {border：1px solid red;} td {vertical-align：center;位置：相对; box-sizing：border-box;位置：相对; border：1px solid black;} td .bar：first-child，td .bar：last-child {display：block;背景：绿色; width：3px; left：-5px;高度：100％; position：absolute; top：0; z-index：1;} p {margin：0; background-color：#dedede; padding：0px;}。tall {height：100px;}。medium {height：60px;}。short {height：30px;}   < table cellspacing =1cellpadding0border =0> < tr> < td> < / p>< span class =bar>< / span>< span class =bar>< < / td> < td>  

The problem I face is IE 11 seem to have inconsistent <td> inner height across single <tr> while other browsers keep it the same.

Here's a pen illustrating my problem: http://codepen.io/anon/pen/emKEBZ

In my layout I have an absolutely positioned pseudo-element (green border) which I want to display on a (outside) <td>. I'd like it to be always as high as the whole <tr> it is in. The content of <td>s is dynamic - I have no control over it's size (like I do in the pen).

I gave it height: 100%, assuming that every <td> in a row has the same height.

td {
  position: relative;
}

td:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -5px;
  width: 3px;
  height: 100%;
  background-color: green;
}

And yeah, that height calculates to the same value across all of the cells in the same row in Firefox and Chrome:

but to different height for each cell in IE 11:

The problem seems to be that in height: 100% IE refers to the inner height (the one inside the padding) of the containing <td>, while other browsers take total height (height + padding + border). And even then, the inner height of all <td>s along one <tr> is identical in Firefox, while it isn't in IE. Is any of those approaches wrong? Is there a way to force IE to work like other browsers do?

解决方案

I finally managed to do that. Here is the code, hope it helps. Fiddle here.

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

body {
    padding:15px;
}
table {
    border: 1px solid black;
    border-spacing: 10px;
    cell-spacing: 0;    
}

tr {
    border: 1px solid red;
}

td {
    vertical-align:center;
    position:relative;
    box-sizing: border-box;
    position: relative;
    border: 1px solid black;
}

td .bar:first-child,
td .bar:last-child {
    display: block;
    background: green;
    width: 3px; 
    left: -5px;
    height: 100%;
    position: absolute; top: 0; 
    z-index: 1;
}

p {
    margin: 0;
    background-color: #dedede;
    padding: 0px;
}

.tall {
    height: 100px;
}

.medium {
    height: 60px;
}

.short {
    height: 30px;
}

<table cellspacing="1" cellpadding "0" border="0">
    <tr>
        <td>
            <span class="bar"></span><p class="tall">Save me!</p><span class="bar"></span>
        </td>
        <td>
            <span class="bar"></span><p class="medium">From problems</p><span class="bar"></span>
        </td>
        <td>
            <span class="bar"></span><p class="short">With IE</p><span class="bar"></span>
        </td>
    </tr>
</table>

这篇关于在IE11中表细胞高度计算不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！