解决“填充”css问题的最佳方法答案

【问题标题】：Best way to solve the 'padding' css problem解决“填充”css问题的最佳方法
【发布时间】：2010-11-15 16:12:15
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

IE 框模型（称为传统框模型），在元素的宽度/高度中包含内边距和边框。

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

W3C 盒子模型（这是标准盒子模型），从元素的宽度/高度中排除了内边距和边框。

在 W3C 盒子模型下，宽度为 100 像素、每边有 2 像素内边距、3 像素边框和每边 7 像素边距的盒子的可见宽度为 124 像素。

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

为了在 IE 中触发 Strict 模式，您必须指定一个 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 过渡：

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

您的文档类型必须是出现在您页面上的第一件事。它甚至在 <html> 标记之前，单独一行。

在此处了解有关 Quirks/Strict 模式的更多信息：

CSS - Quirks mode and strict mode

【讨论】：

【解决方案2】：

不仅 Firefox 和 IE 之间的行为不同......甚至在不同版本的 IE 之间也是不同的。

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

【讨论】：

【解决方案3】：

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

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

我不确定这是否是最好的方法，但我认为没有人真正弄清楚这一点。我认为我们都尽力而为，并希望随着时间的推移情况会变得更好，因此不需要这些东西。

【讨论】：