CSS 解决“填充”css问题的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1210417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to solve the 'padding' css problem
提问by Alan
<div style='width:500px; height:500px; padding:50px;'> </div>
As the behaviors of 'padding' on IE and Firefox are different. What is the best way to solve this problem?
由于 IE 和 Firefox 上的“填充”行为不同。解决这个问题的最佳方法是什么？
回答by Andrew Moore
The IE box model(known as the traditional box model), includes the padding and border in the width/height of an element.
该IE盒模型（称为传统的盒模型），包括一个元件的宽度/高度填充和边界。
Under the IE box model, a box having a width of 100px, with 2px padding on each side, a 3px border, and 7px margin on each side, will have a visible width of 114px.
在 IE 盒子模型下，一个宽度为 100px、每边 2px 填充、3px 边框和每边 7px 边距的盒子将具有 114px 的可见宽度。
The W3C box model(which is the standard box model), excludes the padding and border from the width/height of an element.
的W3C盒模型（这是标准盒模型），从排除的元件的宽度/高度填充和边界。
Under the W3C box model, a box having a width of 100px, with 2px padding on each side, a 3px border, and 7px margin on each side, will have a visible width of 124px.
在 W3C 盒子模型下，宽度为 100 像素、每边 2 像素填充、3 像素边框和每边 7 像素边距的盒子将具有 124 像素的可见宽度。
(source: 456bereastreet.com)
（来源：456bereasttreet.com）
In order to make IE use the W3C box model (which is what every other browser uses), your page needs to be rendered in Strict mode. By default, IE renders in Quirks mode.
为了让 IE 使用 W3C 盒模型（这是所有其他浏览器使用的模型），您的页面需要以严格模式呈现。默认情况下，IE 以 Quirks 模式呈现。
In order to trigger Strict mode in IE, you must specify a doctype. You can use any of the following doctypes:
为了在 IE 中触发 Strict 模式，您必须指定一个 doctype。您可以使用以下任何文档类型：
HTML4 Strict:
HTML4 严格：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd" >
XHTML 1.0 Strict:
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:
XHTML 1.0 过渡：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Your doctype must be the first thing to appear on your page. It is even before the <html>tag, on its own line.
您的文档类型必须是出现在页面上的第一件事。它甚至在<html>标签之前，在它自己的行上。
More information about Quirks/Strict mode here:
有关 Quirks/Strict 模式的更多信息，请访问：
回答by Justin Niessner
Not only are the behaviors different between Firefox and IE...they're different even between the different versions of IE.
不仅 Firefox 和 IE 之间的行为不同……它们甚至在不同版本的 IE 之间也不同。
The best approach is to use CSS selectors rather than inline styles and use IE conditional comments to load different stylesheets based on browser version. It allows you to create one master stylesheet and then fix any anomolies in the others.
最好的方法是使用 CSS 选择器而不是内联样式，并使用 IE 条件注释根据浏览器版本加载不同的样式表。它允许您创建一个主样式表，然后修复其他样式表中的任何异常。
回答by Jon
Another option is to put in a conditional comment for a particular browser you're having trouble with for example:
另一种选择是为您遇到问题的特定浏览器添加条件注释，例如：
<!--[if IE 6]>
<style type="text/css">
#thisdiv { width:500px; height:500px; padding:50px; }
</style>
<![endif]-->
I'm not sure this is the best way but I don't think anyone has this really figured out. I think we all just do our best and hope that things get better over time so this stuff isn't needed.
我不确定这是最好的方法，但我认为没有人真正弄清楚这一点。我认为我们都尽力而为，并希望随着时间的推移事情变得更好，所以不需要这些东西。
