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

Posted 2023-03-06

【中文标题】在 IE11 中计算的表格单元格高度不同

【英文标题】：Table cells height calculated differenly in IE11

【发布时间】：2015-04-30 02:11:30

【问题描述】：

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

这是说明我的问题的笔：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 的同一行中的所有单元格中，该高度计算为相同的值：

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

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

【问题讨论】：

你有 CSS 重置吗？

@JamesGeorgeDunn 是的，我愿意。

这是 IE 中的一个错误，最近已修复。我们渲染引擎的未来版本将与 Chrome/Firefox 类似。我最近为a similar question 提供了一个解决方法。过去，100% 是由 within 内容的高度决定的，而不是 cell 本身 的 offsetHeight。

我使用的一种解决方法是从顶部而不是底部引用绝对定位的单元格。很好地使用插图@Robert！

【参考方案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>

【讨论】：

我确认它工作正常。但是它不仅使用 javascript，还添加了很多标记。我会等着看是否不能仅使用 CSS 来完成。如果没有，我可能会使用 JavaScript，但没有任何额外的标记。看来您在编写解决方案方面付出了相当多的努力，所以非常感谢您。

@Robert 我也很好奇是否有人可以仅使用 CSS 来完成它。在这之后我今天搜索并挖掘了整个互联网，这将是一个惊喜，但会很好地学习。

这似乎是一些 IE 的奇怪之处，所以 CSS 很有可能无法解决这个问题，但谁知道...

【参考方案2】：

我将margin 加到100 的总数中

.tall 
  height: 100px;


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


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

【讨论】：

在我的真正问题中，<td> 中的内容是动态的——我无法预测它的大小。我只是编造了那些 .short、.medium 和 .tall 类来说明问题。

据我所知，IE 不会影响 table-cell 和 table-row 的高度百分比

那你怎么解释这种行为呢？你应该用我提供的笔在 IE 中运行。它会在实践中显示问题，所以你可以摆弄它。

【参考方案3】：

IE 关于表格单元格的奇怪而有趣的行为在这里。 如果您想要一种方法，您应该将单元格放在 inline-block 上并设置高度值，然后使用 line-height 对齐内容，同时重置文本容器的 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

【讨论】：

这很好，但是当<p> 之一的高度超过 137 像素时会发生什么？:)

@Pik_at 我无法设置任何固定高度，因为单元格的内容将具有可变大小，并且单元格应该适应它。

其实在表格单元格中使用 position: relative 是没有定义的，看这个帖子：***.com/a/17527089/4583260

但是您将height: 137px 设置为td。我需要 td 与它所在的整个 tr 一样高 (100%)。而且我不能将其设置为 137 像素，因为我想要响应式布局 - 我不知道行有多高（或者更确切地说其中的内容）将用于任何行。