創建一個帶有居中div的純色頭部

以下是我的目標，在Firefox 7中正確工作100％。創建一個帶有居中div的純色頭部

enter image description here

當我在IE 8打開它，它會顯示這樣的：

enter image description here

這裏是基本的佈局：

<div id="header-home"> 
    <div id="header-content"> 
    </div> 
</div>

與所有內部的元素#header-content。

以下是JSFiddle上託管的相關HTML和CSS。如果您拉伸預覽窗格，您會看到Firefox上的內容正確居中。

http://jsfiddle.net/stapiagutierrez/agURs/

爲什麼IE不居中DIV，因爲它應該？

來源

2011-10-27 Only Bolivian Here

你能告訴我們完整的代碼？「margin：auto」不工作的一個可能原因是您沒有文檔類型或錯誤的文檔。 –

@AlexeyIvanov整個代碼位於JSFiddle鏈接中。我注意到我錯過了一個文檔類型。我應該使用什麼？爲什麼IE很挑剔！ :( –

那麼，你使用xhtml，所以我添加了一個JSFiddle的xhtml。試試這個：http://jsfiddle.net/agURs/1/ –

如果您的html中沒有文檔類型，IE會回退到怪癖模式。而在怪癖模式下，margin auto;沒有工作。

添加doctype可以解決它。

正確的DOCTYPE和頭爲XHTML（所以XML的讀者可以理解它是XML，可以解析它）是：

<?xml version="1" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

但是，如果你之前DOCTYPE線將XML線，IE不會接受（因爲它認爲doctype始終是文檔的第一行）。因此，要使它在IE瀏覽器，你應該寫：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<?xml version="1" encoding="UTF-8"?>

或者只是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

來源

2011-10-27 13:50:21

嘗試將margin:0 auto設置爲#header-content。

來源

2011-10-27 13:43:01 MCSI

創建一個帶有居中div的純色頭部

回答

相關問題