解決'填充'css問題的最佳方法

<div style='width:500px; height:500px; padding:50px;'> </div>

由於IE和Firefox上的「填充」行爲不同。解決這個問題的最好方法是什麼？解決'填充'css問題的最佳方法

2009-07-31 Alan

它們有什麼不同？ – 2009-07-31 02:41:42

請參閱Andrew的文章。它解釋得很清楚。 – Alan 2009-07-31 03:40:50

IE框模型（被稱爲傳統框模型），包括在元素的寬度/高度的填充和邊框。

在IE框模型下，寬度爲100px，每邊2px填充，3px邊框和7px邊距的框將具有114px的可見寬度。

W3C盒子模型（這是標準盒子模型），從元素的寬度/高度中排除填充和邊框。

在W3C框模型下，寬度爲100px，每邊2px填充，3px邊框和每邊7px邊距的框將具有124px的可見寬度。

爲了使IE使用W3C盒模型（這是所有其他瀏覽器使用），需要在嚴格模式來呈現你的頁面。默認情況下，IE以怪癖模式呈現。

爲了在IE中觸發嚴格模式，您必須指定文檔類型。您可以使用以下任何文檔類型的：

HTML4嚴格：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd" >

XHTML 1.0 Strict標準：

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

XHTML 1.0過渡：

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

你的doctype必須是第一件事就是出現在你的頁面上。它甚至在<html>標籤之前。

約怪癖/嚴格的模式在這裏

的更多信息：

CSS - Quirks mode and strict mode

2009-07-31 02:41:52

不僅是Firefox和IE之間不同的行爲......他們甚至不同版本的IE之間是不同的。

最好的方法是使用CSS選擇器而不是內聯樣式，並使用IE條件註釋基於瀏覽器版本加載不同的樣式表。它允許你創建一個主樣式表，然後修正其他的異常。

2009-07-31 02:42:57

另一種選擇是擺在有條件的意見，您遇到例如麻煩特定的瀏覽器：

<!--[if IE 6]> 
    <style type="text/css"> 
      #thisdiv { width:500px; height:500px; padding:50px; } 
    </style> 
<![endif]-->

我不知道這是最好的方式，但我不認爲任何人有這真的想通了。我認爲我們都盡力而爲，希望隨着時間的推移，事情會變得更好，所以這些東西是不需要的。

2009-07-31 02:52:27 Jon

回答