解决'填充'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

回答