Css IE9-10高度：100%不'；行不通_Css_Html_Internet Explorer

Css IE9-10高度：100%不'；行不通

css html internet-explorer

Css IE9-10高度：100%不'；行不通,css,html,internet-explorer,Css,Html,Internet Explorer,当我将绝对定位的div（#窗口）放在表单元格div（#cell-2）中时，#窗口不会显示在IE9和10中。不过，它在其他浏览器中也可以正常工作。我在这篇文章的末尾放了一把小提琴来演示这一点以下是html： <body> <div id="table"> <div id="cell-1"></div> <div id="cell-2"> <div id="window

当我将绝对定位的div（#窗口）放在表单元格div（#cell-2）中时，#窗口不会显示在IE9和10中。不过，它在其他浏览器中也可以正常工作。我在这篇文章的末尾放了一把小提琴来演示这一点

以下是html：

<body>
    <div id="table">
        <div id="cell-1"></div>
        <div id="cell-2">
            <div id="window"></div>
        </div>
    </div>
</body>

。您会注意到，在非IE浏览器中，屏幕的右侧部分正确地显示了黄色div。但在使用IE9和IE10时显示绿色div

值得注意的是#window是一个动态生成的模式窗口，应该包含不一定为空的#cell-2的内容。需要溢出。

这个问题似乎与IE忽视身高的事实有关：100%；因为高度：100px；例如，将按预期显示

任何帮助都将不胜感激。谢谢

从#window类中删除position:absolute并重试，它可以工作

#窗口{
溢出y：滚动；
溢出x：隐藏；
背景颜色：黄色；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

尝试将填充设置为0，高度：自动；在窗户里

#窗口{
位置：绝对位置；
溢出y：滚动；
溢出x：隐藏；
背景颜色：黄色；
排名：0；
左：0；
宽度：100%；
高度：自动；
填充：0；或者，从#cell-2
中删除position:relative
，并将position:relative
放入#window
中。问题实际上是position:relative in#cell-2删除IE中的宽度和高度，原因未知。这里的问题是我们希望#window
像模态一样工作。不是吗删除position absolute是否会造成潜在的堆叠问题？@AlexPakka感谢这解释了我们面临的问题。至少我现在明白了。我将添加到我之前的评论中，并编辑第一篇帖子：#cell-2
可能不是空的。因此position absolute保证#window将堆叠在（z）上方内容。这两种解决方案在这种情况下都会造成麻烦谢谢你的回答。这似乎不起作用。嗯，这很有趣，你使用的是哪种版本的IE？使用什么文档模式？这就是我告诉人们IE根本就坏了的原因（以及这样草率的代码所固有的安全风险），我没有加载它，除了在至少10年内安装Firefox所需的5秒钟。实际上，每当它试图处理来自操作系统的一些文件扩展名而意外启动时，我都会有一点恐慌。我知道大多数开发人员不会说“我不再为IE开发了”.我认为这对他们和他们的公司来说都是一个问题-这是一个巨大的负担，表明你对客户支持IE缺乏尊重。
html, body{
    height:100%;
}

#table{
    display:table;
    width:100%;
    height:100%;
    background-color:blue;
}

#cell-1{
    display:table-cell;
    height: 100%;
    width: 210px;
    background-color:black;
}

#cell-2{
    display:table-cell;
    position:relative;
    height:100%;
    background-color:green;
}

#window{
    position:absolute;
    overflow-y:scroll;
    overflow-x:hidden;
    background-color:yellow;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

#window{
position:absolute;
overflow-y:scroll;
overflow-x:hidden;
background-color:yellow;
top:0;
left:0;
width:100%;
height:auto;
padding:0;  <-----
}