爲什麼頁面在IE中的顯示方式與google chrome不同？

2

您忘記了添加a doctype，因此您的頁面在Quirks Mode。

添加這個（HTML5的DOCTYPE）作爲第一行：

<!DOCTYPE html>

，它應該更好看。

雖然手動更改文檔模式（使用開發工具;按F12），但它看起來仍然不正確。頁面顯然存在其他問題。

最相關的問題（逃逸Quirks模式後）是這樣的：

<body style="margin: 0; padding; 0;background-color: 4DA2CA;">

Internet Explorer未顯示任何背景顏色，因爲你忘了顏色前#。（你有padding; 0，用的;代替:）

這將工作：

<body style="margin: 0; padding: 0; background-color: #4DA2CA">

但你不應該擺在首位使用內嵌樣式..

這將是好：

<body>

與CSS 在樣式表：

body { 
    margin: 0; 
    padding: 0; 
    background-color: #4DA2CA 
}

來源

2011-04-30 20:02:25 thirtydot

+0

即使使用Doctype，它仍然看起來很糟糕。（這可以部分解決它。） – 2011-04-30 20:04:58

0

你的意思是在IE中div的是smaller.Thats因爲在IE的CSS邊界，保證金被包括在寬度declared.So如果你給的100px的一個div寬度和10px的雙方的保證金那麼在IE中，這個div的實際可見寬度將是100-10-10 = 80px。要解決此問題，您可以使用子css decleration。考慮，如果你想顯示這個我們的例子中的div 100px的寬度在兩個瀏覽器中執行以下操作

.mydiv{  /*This deceleration will be understood by all the browsers*/ 
    margin:10px; 
    width:120px;  
    } 

    html>body .mydiv{ /*This deceleration will not be understood by IE browsers so other will override the width*/ 
    width:100px;   
    }

利用這一點，你可以均勻你的div橫跨IE和非IE瀏覽器

來源

2011-04-30 20:12:37 anu

+0

（只是爲了讓你知道，該頁面正在進行實時編輯。由於問題已發佈，因此我的答案已修復更新。） – thirtydot 2011-04-30 20:14:06

0

取而代之的是寬指出每個元素在IE中呈現的不同方式的原因，我強烈建議每次創建新頁面元素時不要重新發明輪子。

即使在現代標準的投訴瀏覽器，CSS可以非常不可預測的，所以最好使用的代碼防彈片段來自可信來源，如

CSS the Missing Manual

CSS the Definitive Guide

CSS Cookbook

從HTML/CSS的工作塊開始，並根據您的喜好對其進行修改，然後從中進行跨瀏覽器測試。整個過程將不那麼令人沮喪。