在IE11中差异计算表格单元高度

Question

我面临的问题是IE 11似乎在单个<td> 内部具有不一致的内部高度,<tr>而其他浏览器保持相同.

这是一支说明我问题的笔:http://codepen.io/anon/pen/emKEBZ

在我的布局中,我有一个绝对定位的伪元素(绿色边框),我想在(外部)上显示<td>.我希望它总是和<tr>它的整体一样高.s 的内容<td>是动态的 - 我无法控制它的大小(就像我在笔中所做的那样).

我给了它height: 100%,假设每一<td>行都有相同的高度.

td {
  position: relative;
}

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

是的,这个高度在Firefox和Chrome的同一行中的所有单元格中计算的值相同:

但IE 11中每个单元格的高度不同:

问题似乎是在height: 100%IE中指的是包含内部高度(填充内部的高度)<td>,而其他浏览器则采用总高度(高度+填充+边框).即便如此,所有s 的内部高度在Firefox中都是相同的,而在IE中则不然.这些方法有错吗？有没有办法迫使IE像其他浏览器一样工作？<td><tr>

Answer 1

我终于做到了。这是代码，希望有帮助。在这里拉小提琴。

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>