为什么我的填充更改不会影响 IE 中元素的宽度？答案

【问题标题】：Why don't changes to my padding affect the width of an element in IE?为什么我的填充更改不会影响 IE 中元素的宽度？
【发布时间】：2013-02-12 07:14:22
【问题描述】：

Firefox 和 Chrome 处理填充的方式与 IE 不同。

对于 Firefox 和 Chrome，当我使用填充时，它会添加到 div 的总宽度中。对于 IE，填充值被忽略，因此 CSS 无法统一工作。这似乎是一个新的发展，因为他们一直工作相同。 EG

#header
{
   width:280;
   padding-left:10px;
   padding-right:10px;
}

这在 Firefox 和 Chrome 中总共有 300 像素，但在 IE 中宽度没有变化。

我该如何处理这个问题？

【问题讨论】：

您要设置样式的 HTML 是什么。元素会有所不同，因为它可能使用不同的盒子模型，或者取决于浏览器的显示模式。
看到这个article...
顺便问一下，您的目标是哪些 IE？

标签： html css

【解决方案1】：

您在这里处理的是known problem in IE。

简而言之，当您的 HTML 出现问题时，IE 会进入 Quirks 模式，试图找出解决这些问题的方法。当它这样做时，它对CSS Box Model（决定如何处理宽度、填充、边框和边距的东西）的解释脱离了 W3C 标准。

因此，很有可能您的 HTML 存在问题，您的第一个呼叫端口应该是 W3C Markup Validation Service。使用它来验证您的 HTML。一旦您的 HTML 验证通过，请使用您的 CSS 重试。如果它仍然损坏，请返回这里。

【讨论】：

【解决方案2】：

添加一个 doctype 并修改我的 html 标签帮助我解决了这个问题。这是下面的新变化。

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

html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

当然，我使用了开始和结束标记，但没有正确显示为代码块

【讨论】：