Question

以下链接中的代码在Google Chrome和IE9中显示正常。它在IE8中显示很糟糕。有关如何在IE8中正确显示的任何想法？我想将它保持为3列布局，带有固定的中间列，侧面是流体/液体/柔性，并且还将垂直空间填充到Web浏览器的100％全高度。

http://jsfiddle.net/STVinMP/eZ7Nb/

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>title here</title>
<style type="text/css">

.header {
display: table;
width: 100%;
height:100%;
text-align:center;
}

.header > div {
display: table-cell;
vertical-align:top;
}
.col {
width:20%;
}

#rightcol {
width:10%;
background-image:url('http://quetico.info/images/topo.png');
}
#leftcol {
width:10%;
background-image:url('http://quetico.info/left.jpg');
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
}
#midcol {
background:#d0eadd;
/*  ffff8b;  */
padding-top:55px;
}
</style>
</head>
<body>
<div class="header container">

<div id="leftcol" title="portage photo by Hans Solo"></div>

<div id="midcol" class="col col-2">

<div id="divLeftInd">some text here</div><!-- ######## end of divLeftInd ##### -->

</div><!-- ####### END OF DIV FOR midcol -->
<div id="rightcol"></div>

</div><!-- ####### END OF DIV FOR header container -->
</body>
</html>

Answer 1

我认为8不支持背景大小

Answer 2

您可以尝试使用this answer

中建议的filter属性的sizingMethod属性

Answer 3

如果我清楚你的目标是什么，我认为这会奏效。

<html>
    <body style="margin:0px; padding:0px;">
        <div style="height:100%; width:100%; margin:0px; padding:0px; background-color:#333;">
            <div style="width:80%; min-width:960px; margin-left:auto; margin-right:auto; background-color:#fff" height:100%;>
                <p>info here</p>
            </div>
        </div>
    </body>
</html>

HTML代码适用于Chrome和IE9，但不适用于IE8

3 个答案: