Question

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

由于IE和Firefox上的“填充”行为不同。解决这个问题的最佳方法是什么？

Answer 1

IE框模型（称为传统的盒子模型），包括元素宽度/高度的填充和边框。

在IE盒子模型下，宽度为100px，每边2px填充，3px边框和每边7px边距的盒子的可见宽度为114px。

W3C盒型号（标准盒型号），从元素的宽度/高度中排除了填充和边框。

在W3C盒子模型下，宽度为100px，每边2px填充，3px边框和每边7px边距的盒子的可见宽度为124px。

为了使IE使用W3C盒子模型（这是其他浏览器使用的模型），您的页面需要以严格模式呈现。默认情况下，IE以Quirks模式呈现。

要在IE中触发严格模式，您必须指定doctype。您可以使用以下任何文档类型：

HTML4严格：

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

XHTML 1.0严格：

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

XHTML 1.0 Transitional：

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

您的doctype必须是首页出现在您的页面上。它甚至在<html>标记之前，就在它自己的行上。

有关Quirks / Strict模式的更多信息：

CSS - Quirks mode and strict mode

Answer 2

不仅Firefox和IE之间的行为不同......即使在不同版本的IE之间也存在差异。

最好的方法是使用CSS选择器而不是内联样式，并使用IE条件注释根据浏览器版本加载不同的样式表。它允许您创建一个主样式表，然后修复其他的异常。

Answer 3

另一种选择是为您遇到问题的特定浏览器添加条件注释，例如：

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

我不确定这是最好的方式，但我认为没有人真正想到这一点。我认为我们都尽力而为，希望随着时间的推移事情变得更好，所以不需要这些东西。