html代碼適用於Chrome和IE9，但不適用IE8

-1

以下鏈接中的代碼在Google Chrome和IE9中顯示正常。它在IE8中顯示糟糕。任何想法如何使它在IE8中正確顯示？我想保留它作爲一個固定的中間列和兩側流體/液體/柔性的3列布局，並填充垂直空間到網頁瀏覽器的100％全高。html代碼適用於Chrome和IE9，但不適用IE8

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>

來源

2013-12-17 user1218122

男人你剛纔問一個加載的問題:)。我建議您查看IE 8的「CSS技巧」。您還可以使用http://caniuse.com檢查瀏覽器與特定CSS/JS/HTML的兼容性。 – Jasper

這些都不能在IE8中使用-moz-background-size：100％100％; -webkit-background-size：100％100％; background-size：100％100％; - 所以做一些其他使用條件即CSS或另一種解決方案，如現代化等。 – Christina

我真的不能看到小提琴中的瀏覽器之間的區別。你能檢查代碼是否被正確複製嗎？ –

我想在IE 8

來源

2013-12-17 22:47:48 oded

您是否有任何支持文件來備份此聲明？ – rgettman

我發現這個：http://stackoverflow.com/questions/11200887/background-image-size-is-not-working-in-ie-8。我希望它有幫助 – oded

你可以用濾鏡屬性sizingMethod屬性儘量不支持這樣的背景下，大小爲this答案

來源

2013-12-17 22:57:35

提出如果我明確的你的目標是什麼，我認爲這將起作用。

<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>

來源

2013-12-17 23:02:28 rlwheeler

html代碼適用於Chrome和IE9，但不適用IE8

回答

相關問題