補償餘量：在IE中爲0自動

Question

您可以在這裏看到現場直播版本：http://steffiwilson.com/test。

IE9未將內容塊居中。 （我非常肯定老版本的IE瀏覽器也無法正常工作，但我無法確定）。我確信有一個文檔類型，並且我的代碼是有效的。我申請

text-align: center; 

的內容塊的父元素，但它不工作。所以後來我想也許我會讓IE瀏覽器轉到一個js文件，通過給它一個絕對的位置來覆蓋它，但是我通過alert語句確定它沒有通過這裏的第三行。

screenwidth = document.documentElement.clientWidth; 
sidespace = ((screenwidth - 700)/2) + "px"; 
document.getElementById("content").style.position = "absolute"; 
document.getElementById("content").style.left = sidespace; 

任何想法？我願意做任何有用的東西 - CSS或Javascript。我想知道我的stickyfooter的代碼是否導致問題。

這裏是我的CSS的相關部分：

* { 
margin:0; 
    padding:0; 
} 

html, body { 
    height: 100%; 
    text-align: center; 
} 

body { 
    background-color: #c1e9e9; 
    background-image: url('images/background.png'); 
    background-repeat: repeat-y; 
    background-position: center; 
    min-width: 750px; 
} 

#wrap { 
    min-height: 100%; 
    text-align: center; 
} 

#main { 
    overflow:auto; 
    padding-bottom: 150px; 
    text-align: center; 
} 

#content { 
    width:700px; 
    margin:0 auto; 
    text-align:left; 
    padding:15px; 
} 

#footer { 
    position: relative; 
    margin-top: -150px; 
    height: 150px; 
    clear:both; 
    text-align: center; 
    background-image: url('images/dog.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    /*"sticky footer" design credit to www.cssstickyfooter.com*/ 
} 


/*Opera Fix for sticky footer */ 
    body:before { 
    content:""; 
    height:100%; 
    float:left; 
    width:0; 
    margin-top:-32767px; 
} 

table { 
    margin-left: auto; 
    margin-right: auto; 
    border-spacing: 0px; 
    border-collapse: collapse; 
} 

Answer 1

#wrap被對齊，所以對準#content或#main將無法​​正常工作。將您的規則更改爲#wrap至

#wrap { 
    margin:0 auto; 
    min-height: 100%; 
    text-align: center; 
} 

它將在IE中運行。

編輯：因爲你在一個條件註釋設置其顯示屬性設置爲display:table#wrap是錯位的。據我所見，你不想在IE6,8,9（<!--[if !IE 7]>）中使用這個，但在IE < 7（<!--[if lt IE 7]>）。所以改變這個評論或放棄它。