Html 当使用CSS显示：表格时，为什么在IE10及更低版本中高度100%失败？

我读过很多文章，这些文章似乎不能解释或帮助解决这个问题。所以我希望一些CSS高手能帮上忙

因此，我使用CSS表格布局来实现样式化div的简单垂直对齐。外部div具有计算的大小，内部嵌套div从各自的父级继承大小。在IE10或以下版本中查看之前，一切都很好。行和单元格都决定其高度为0px。我认为这是因为行级别没有指定高度，所以在IE中，单元格无法继承父高度。因此，如果将高度100%添加到行中，它仍然可以在除IE10以外的所有浏览器中正常工作，其中行决定其双倍高度。我能想到的唯一一件事是IE不满意，我把一些100%的div放在一个容器中，让它们计算出它们自己相等的大小

.container{
背景颜色：灰色；
高度：计算（100px+10px）；
宽度：200px；
位置：固定；
}
.桌子{
身高：100%；
宽度：200px；
背景色：黑色；
显示：表格；
}
.行{
宽度：100%；
显示：表格行；
背景颜色：橙色；
}
1号楼{
身高：100%；
宽度：100%；
背景色：红色；
显示：块；
}
表细胞{
/*身高：100%*/
显示：表格单元格；
}
.第2区{
身高：100%；
宽度：100%；
背景颜色：蓝色；
显示：块；
}

为什么不使用javascript（旧网页上大量使用javascript，以弥补旧浏览器中缺少css支持的不足）这一功能非常小

adjustHeight();
window.addEventListener('resize', adjustHeight);

function adjustHeight(){
    document.getElementsByClassName('container')[0].style.height = window.innerHeight + 'px';
    // or if you have jQuery it would be even more retro compatible without too much hassle
    // $('.container').css('height', window.innerHeight);
};

您也可以使用javascript进行垂直分隔

$（'container-half'）.css（'height'，window.innerHeight/2）就是一个例子

**编辑**
现在用你的例子


adjustHeight（）；
window.addEventListener（“调整大小”，调整高度）；
功能调整高度（）{
document.getElementsByClassName（'container'）[0].style.height=window.innerHeight+'px'；
};
.container{
背景颜色：灰色；
高度：计算（100px+10px）；
宽度：200px；
位置：固定；
}
.桌子{
身高：100%；
宽度：200px；
背景色：黑色；
显示：表格；
}
.行{
宽度：100%；
显示：表格行；
背景颜色：橙色；
}
1号楼{
身高：100%；
宽度：100%；
背景色：红色；
显示：块；
}
表细胞{
/*身高：100%*/
显示：表格单元格；
}
.第2区{
身高：100%；
宽度：100%；
背景颜色：蓝色；
显示：块；
}

为什么不使用javascript（旧网页上大量使用javascript，以弥补旧浏览器中缺少css支持的不足）这一功能非常小

adjustHeight();
window.addEventListener('resize', adjustHeight);

function adjustHeight(){
    document.getElementsByClassName('container')[0].style.height = window.innerHeight + 'px';
    // or if you have jQuery it would be even more retro compatible without too much hassle
    // $('.container').css('height', window.innerHeight);
};

您也可以使用javascript进行垂直分隔

$（'container-half'）.css（'height'，window.innerHeight/2）就是一个例子

**编辑**
现在用你的例子


adjustHeight（）；
window.addEventListener（“调整大小”，调整高度）；
功能调整高度（）{
document.getElementsByClassName（'container'）[0].style.height=window.innerHeight+'px'；
};
.container{
背景颜色：灰色；
高度：计算（100px+10px）；
宽度：200px；
位置：固定；
}
.桌子{
身高：100%；
宽度：200px；
背景色：黑色；
显示：表格；
}
.行{
宽度：100%；
显示：表格行；
背景颜色：橙色；
}
1号楼{
身高：100%；
宽度：100%；
背景色：红色；
显示：块；
}
表细胞{
/*身高：100%*/
显示：表格单元格；
}
.第2区{
身高：100%；
宽度：100%；
背景颜色：蓝色；
显示：块；
}

Your CSS=Your HTML？抱歉，剪切/过去失败：（您是否尝试过为
表格单元格
元素简单地设置
高度：50%
？使其在IE Edge中看起来像在Chrome中一样，10和9，并且似乎也不会改变Chrome中的显示。运行时单元格的数量是动态的，可能是一个或多个。因此，遗憾的是，固定高度不是一个选项。谢谢您的CSS=您的HTML？抱歉切断/过去故障：（您是否尝试过为
表格单元格
元素简单设置
高度：50%
？使其在IE Edge中看起来像在Chrome中一样，10和9，并且似乎也不会改变Chrome中的显示。运行时单元格的数量是动态的，可能是一个或多个。因此，遗憾的是固定高度不是一个选项。谢谢您的回答，但我想做的是了解IE的功能，这样我才能对修复做出最佳判断。虽然有很多方法可以使用不同的方法获得相同的结果，但我正在尝试找到干扰最小的CSS更改。如果可能的话？如果没有在CSS中设置，IE10及以下版本不会从窗口中获取“计算”几何体。你可以如果没有javascript，这是无法实现的。您仍然可以使用绝对位置（在IE6或更低版本中不起作用）并使用百分比设置底部/顶部位置。嗨，这在IE10中对我来说仍然不起作用。问题不在于容器高度，（您可以将其设置为固定高度，但仍然失败）当块计算它们的100%高度时，问题似乎就显现出来了，即它们是零。我认为这是由于在父（tablecell）中没有指定高度如果您取消注释高度：100%以上，IE会计算高度，但不幸的是，它坚持100%的父级，而不是与兄弟姐妹共享高度。因此，结果是高度增加了一倍，单元格超过了行高度。您好，谢谢您的回答，但我想做的是了解IE在做什么，以便我可以做出正确的选择修复的最佳判断。虽然有许多方法可以使用不同的方法实现相同的结果，但我正在尝试找到侵入性最小的CSS更改。如果可能的话？IE10及以下版本不会获得“计算”几何体fr