Internet Explorer错误地计算了td中生成的内容的百分比高度 [英] Internet Explorer incorrectly calculates percentage height for generated content in td
问题描述
IE11正在计算表格单元格的高度是其内容的高度（20px），而不是其背景的高度（100px）。
其他浏览器会按预期工作。
IE11 is calculating the height of a table cell as the height of its content (20px) and not as the height of its background (100px).
Other browsers work as expected.
如何在IE中修复该问题？
或：我做错了什么？
或：我该如何解决？
How can I fix that in IE?
Or: what am I doing wrong?
Or: how can I work around that?
我需要这个，以便可以在表格单元格后面画一条垂直线。
I need this so I can draw a vertical line behind a table cell.
由于我特定问题的详细信息，某些解决方法是不可能的。
Some work-arounds are not possible, due to the details of my particular problem.
高度不是恒定的，这取决于另一个单元格上的文本量。
The height is not constant, it depends on the amount of text on another cell.
所以我也不能使用固定的行高。如果可以的话，我也可以将固定大小设置为:: before的高度。
So I cannot use a fixed line-height either. If I could, I could also just put that fixed size as ::before's height.
我无法通过使用重复的背景图像来解决该问题，因为该行应该不一个居中的图标，因此我使用生成的内容（ :: before 和 :: after ）进行绘制高度：calc（50％-20px）; 。
I cannot work around that by using a repeating background-image because the line is supposed to not be drawn behind an icon that is centred, so I am drawing it by using generated content (::before and ::after) with height: calc(50% - 20px);.
尝试在IE11中打开在线示例 ，以及在Firefox或Chrome中。
Try opening the online sample in IE11, and in Firefox or Chrome.
请注意，JavaScript显示的第一个单元格的高度 be 为100px，背景填充为100px。但是生成的内容只有〜20px高...
Note that JavaScript shows the first cell to be 100px tall, and the background fills the 100px. But the generated content is only ~20px tall...
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#borked {
background: yellow;
position: relative;
height: 100%;
}
#borked~* {
height: 100px;
}
#borked::before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.3);
}
</style>
</head>
<body>
<table>
<tr><td id="borked">abc</td><td>def</td></tr>
</table>
</body>
<script type="text/javascript">
"use strict";
var borked = document.getElementById("borked");
var c = document.createElement("td");
c.textContent = "(1st cell seems to be " + borked.clientHeight + "px tall)";
borked.parentElement.appendChild(c);
</script>
</html>
推荐答案
Internet Explorer内容高度与高度最近的元素有关以绝对单位设置，例如像素。
如果要使用％height，则需要在所有父元素上设置高度，这将是html，body，table...。
Internet Explorer content height is related to closest element with height set in absolute units, such as pixels. If you want to use % height, you need to set the height on all parent elements, this will be html, body, table ....
因为这对您来说是不可能的，请使用此技巧来满足您的要求。
Cause this is not possible for you, use this trick to meets your requirements.
"use strict";
var borked = document.getElementById("borked");
var td = document.createElement("td");
td.textContent = "(1st cell seems to be " + borked.clientHeight + "px tall)";
borked.parentElement.appendChild(td);
#borked {
background: yellow;
position: relative;
height: 100%;
overflow: hidden;
}
#borked~* {
height: 100px;
}
#borked::before {
content: "";
position: absolute;
top: 0;
width: 100%;
margin: -99999em;
padding: 99999em;
background-color: rgba(0, 255, 0, 0.3);
}
<table>
<tr><td id="borked">abc</td><td>def</td></tr>
</table>
这篇关于Internet Explorer错误地计算了td中生成的内容的百分比高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
