Question

我面临的问题是IE 11在单个<td>内似乎存在不一致的<tr> 内部高度，而其他浏览器则保持不变。

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

在我的布局中，我有一个绝对定位的伪元素（绿色边框），我想在（外部）<td>上显示。我希望它始终与整个<tr>一样高。<td> s的内容是动态的 - 我无法控制它的大小（就像我在笔中所做的那样）。

我给它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的同一行中的所有单元格中计算的值相同：

Chrome and Firefox

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

Ineternet Explorer 1

问题似乎是在height: 100% IE中指的是包含<td>的内部高度（填充内部的那个），而其他浏览器则使用总高度（高度+填充+边框）。即使这样，一个<td>中所有<tr>的内部高度在Firefox中也是相同的，而在IE中则不然。这些方法有错吗？有没有办法强制IE像其他浏览器一样工作？

Answer 1

我终于设法做到了。这是代码，希望它有所帮助。 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>

Answer 2

我只会将margin添加到总100

.tall {
  height: 100px;
}

.medium {
  height: 60px;
  margin: 20px 0;
}

.short {
  height: 30px;
  margin: 35px 0;
}

Answer 3

IE在这里有关于table-cell的奇怪而有趣的行为。如果你想要一个方法，你应该将单元格放在内联块并设置高度值，然后使用line-height对齐内容，同时重置文本容器的行高，如：

td {
  display: inline-block;
  height: 137px;
  position: relative;
  line-height: 137px;
}

p {
  display: inline-block;
  vertical-align: middle;
  background-color: #dedede;
  line-height: 1;
}

试试IE，我希望这会对你有所帮助：http://codepen.io/pik_at/pen/WbyZrG

在IE11中，表格单元的高度计算方式不同

3 个答案: