ANe*_*ves 13 css internet-explorer
IE11正在计算表格单元格的高度作为其内容的高度(20px)而不是其背景的高度(100px).
其他浏览器按预期工作.
我怎样才能在IE中解决这个问题？
或者:我做错了什么？
或者:我该如何解决这个问题？
我需要这个,所以我可以在表格单元格后面画一条垂直线.
由于我特定问题的细节,一些解决办法是不可能的.
高度不是常数,它取决于另一个单元格上的文本量.
所以我也不能使用固定的行高.如果可以的话,我也可以将固定大小设置为::之前的高度.
我不能工作周围,通过使用重复的背景图像,因为线被认为不是中心的图标背后被绘制,所以我通过使用生成的内容(图纸它::before和::after与)height: calc(50% - 20px);.
尝试在IE11中以及Firefox或Chrome中打开在线示例.
需要注意的是JavaScript的展示了第一个单元格是 100像素高,以及背景填充100像素.但生成的内容只有~20像素高......
<!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>