Css Internet Explorer错误地计算td中生成内容的百分比高度_Css_Internet Explorer

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

css internet-explorer

Css Internet Explorer错误地计算td中生成内容的百分比高度,css,internet-explorer,Css,Internet Explorer,IE11将表格单元格的高度计算为其内容的高度（20px），而不是其背景的高度（100px）。其他浏览器工作正常如何在IE中修复此问题？或者：我做错了什么？或者：我如何解决这个问题我需要这个，这样我可以在表格单元格后面画一条垂直线 1.限制由于我的特殊问题的细节，一些解决办法是不可能的 1.A。高度不是恒定的高度不是恒定的，它取决于另一个单元格上的文本量所以我也不能使用固定的线高度。如果可以的话，我也可以把那个固定的尺寸作为：：before的高度 1.B。无法使用背景图像我无法

IE11将表格单元格的高度计算为其内容的高度（20px），而不是其背景的高度（100px）。
其他浏览器工作正常

如何在IE中修复此问题？
或者：我做错了什么？
或者：我如何解决这个问题

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

1.限制由于我的特殊问题的细节，一些解决办法是不可能的

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

所以我也不能使用固定的线高度。如果可以的话，我也可以把那个固定的尺寸作为：：before的高度

1.B。无法使用背景图像我无法通过使用重复的背景图像来解决这个问题，因为线条应该不会在居中的图标后面绘制，所以我使用生成的内容（

：：before

和

：：after

）和

高度：calc（50%-20px）来绘制它
2.在线样本
尝试在IE11、Firefox或Chrome中打开
请注意，JavaScript显示第一个单元格的高度为100px，背景填充100px。但生成的内容只有~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>


#博克{
背景：黄色；
位置：相对位置；
身高：100%；
}
#博克*{
高度：100px；
}
#博克：以前{
内容：“；
位置：绝对位置；
排名：0；
宽度：100%；
身高：100%；
背景色：rgba（255,0,0,0.3）；
}
abcdef
“严格使用”；
var borked=document.getElementById（“borked”）；
var c=document.createElement（“td”）；
c、 textContent=“（第一个单元格似乎是“+borked.clientHeight+”px-tall）”；
parentElement.appendChild（c）；
Internet Explorer内容高度与最近的元素相关，高度以绝对单位（如像素）设置。
如果要使用%height，则需要设置所有父元素的高度，这将是html、body、table
因为这对您来说是不可能的，请使用此技巧来满足您的要求

“严格使用”；
var borked=document.getElementById（“borked”）；
var td=document.createElement（“td”）；
td.textContent=“（第一个单元格似乎是“+borked.clientHeight+”px-tall）”；
parentElement.appendChild（td）
#博克{
背景：黄色；
位置：相对位置；
身高：100%；
溢出：隐藏；
}
#博克*{
高度：100px；
}
#博克：以前{
内容：“；
位置：绝对位置；
排名：0；
宽度：100%；
边际：-99999 em；
填充：99999 em；
背景色：rgba（0,255,0,0.3）；
}

abcdef
如果您添加一个行高度
以匹配高度
，它似乎可以在IE中修复它（参见此）。也许您可以添加以下样式：行高：calc（50%-20px）？谢谢你的想法，但是：a）
calc with%在IE中不起作用-这就是这个问题的所在-b）
高度不是恒定的，它取决于另一个单元格上的文本量，所以我也不能使用固定的行高（否则我可以将固定的大小设置为：在
的高度之前）.这只是一种预感，因为我没有IE11测试，但您是否排除了上列出的与IE11和calc相关的已知问题？@unruthless谢谢。）我看不出这里应该适用什么；我将通知caniuse的人员这一点。IE可能不会完全错误，因为表格单元尺寸是流动的，并且依赖于其同级，并且只能在呈现布局时计算。我不认为css标准规定了：：before
和：：after
元素应该只在整个表行之后呈现。这只是部分有用，因为高度不是恒定的，它取决于另一个单元格上的文本量，所以我也不能使用固定的行高（否则，我可以将固定尺寸设置为：：before的高度）。