IE10 最小高度不起作用答案

【问题标题】：IE10 min-height not workingIE10 最小高度不起作用
【发布时间】：2013-06-25 22:25:02
【问题描述】：

尽管为 IE 设置了 min-height，但我无法设置 100% 的 DIV 高度。下面分别是CSS和HTML。还附上屏幕截图。

如您所见，左侧的滚动条没有显示 100%

CSS

body
{
    margin:0;padding:0;
    min-height:100%;
    height:100%;
}
#container
{
    background-color: "#FFF";
    width:100%;
    margin: 1%;
    overflow:auto;
    min-height:100%;
    height:100%;

}
#tree_register_abwab
{
    width: 30%;
    float: right;
}
#content
{
    float: right;
    margin-right: 1%;
    overflow-y:scroll;
    width: 60%;
    min-height:100%;
    height:100%;
}
.dynatree-title{
    font-size: 15px !important;
    font-style:normal;
    font-family: Arial !important;
    font-weight:100;
}
.question
{
    font-style:normal;
    color:blue;
    font-family:"Jameel Noori Nastaleeq"; color: rgb(191,22,38); font-size:15pt;
}
.answer
{
    font-style:normal;
    color:blue;
    font-family:"Jameel Noori Nastaleeq"; color:rgb(0,0,0); font-size:15pt;
    margin-top: 2%;
    display: block;
}
#pdficon
{
    margin-right: 1%;
}
.bold{font-weight:bold;font-size: 18pt;}

HTML

<html dir=rtl>
    <head>
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=10"> 
        <meta charset="utf-8" >
         <link href="ui.dynatree.css" rel="stylesheet" type="text/css" />
        <link href="tree-custom.css" rel="stylesheet" type="text/css" />
        <LINK REL=StyleSheet HREF="search.css" TYPE="text/css" MEDIA=all />
        <script src = "jquery-1.8.3.min.js"></script>
        <script src="jquery-ui.custom.min.js" type="text/javascript"></script>
        <script src="jquery.cookie.js" type="text/javascript"></script>
        <script src="jquery.dynatree.js" type="text/javascript"></script>
        <script src="search.js" ></script>
    </head>
    <body>
        <div id="container">
            <div id="tree_register_abwab"></div>
            <div id="content">
                <span id="question" class="question bold">
                </span>
                <span id="pdficon"><a title="  " href="#"><img src="pdf_icon.png" border="0" /></a></span>
                <span id="answer" class="answer">
                </span>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

标签： internet-explorer web css

【解决方案1】：

将 html 添加到 css 文件的顶部，方法是将 CSS 的正文部分更改为：

html, body
{
    margin:0;padding:0;
    height:100%;
}

您还可以删除您设置为height:100% 的所有min-height 属性应该覆盖它。

【讨论】：

只是因为我没有包含HTML标签IE就跳过了吗？？真的吗？
是的！几个月前在 IE 中测试应用程序时，它让我大吃一惊。
最小高度：100px;在 chrome 中工作，但在 IE 11 中没有。添加 min-height: auto !important 后。它开始工作了。

【解决方案2】：

IE 完全忽略了 min-height 属性，而是将声明的高度作为最小高度（看图！）。

诀窍是设置

height: auto !important;

在您设置最小高度的元素上。

例如：

.element {
min-height: 100px;
height: auto !important;
}

注意： 我在图像元素 YMMV 上尝试过这个。

【讨论】：

最小高度：100px;在 chrome 中工作，但在 IE 11 中没有。添加 min-height: auto !important 后。它开始工作了。