gpt4 book ai didi

css - Internet Explorer 错误地计算了 td 中生成的内容的百分比高度

转载 作者:技术小花猫 更新时间:2023-10-29 10:26:32 27 4
gpt4 key购买 nike

IE11 将表格单元格的高度计算为其内容的高度 (20px) 而不是其背景的高度 (100px)。
其他浏览器按预期工作。

如何在 IE 中解决这个问题?
或者:我做错了什么?
或者:我该如何解决这个问题?


我需要这个,这样我就可以在表格单元格后面画一条垂直线。

1。限制条件

由于我的特定问题的细节,有些变通办法是不可能的。

1.A.高度不恒定

高度不是恒定的,它取决于另一个单元格上的文本量。

所以我也不能使用固定的行高。如果可以的话,我也可以把这个固定大小作为::before 的高度。

1.B.不能使用背景图片

我无法通过使用重复的背景图像来解决这个问题,因为该线应该绘制在居中的图标后面,所以我使用生成的内容绘制它(::before::after) 与 height: calc(50% - 20px);

2。在线样本

尝试打开 online sample在 IE11 和 Firefox 或 Chrome 中。

请注意,JavaScript 将第一个单元格显示为 100 像素高,背景填充 100 像素。但是生成的内容只有 ~20px 高...

<!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 内容高度与最近的元素相关,高度以绝对单位(例如像素)设置。如果要使用 % 高度,则需要在所有父元素上设置高度,这将是 html、body、table ....

因为这对你来说是不可能的,所以使用这个技巧来满足你的要求。

"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>

关于css - Internet Explorer 错误地计算了 td 中生成的内容的百分比高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31323915/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com