Question

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

对于Firefox和Chrome，当我使用填充时，会将其添加到div的总宽度中。对于IE，将忽略填充值，因此CSS不能统一工作。这似乎是一个新的发展，因为他们总是一样的。 EG

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

这在Firefox和Chrome中总共提供了300px，但在IE中宽度不会改变。

如何处理此问题？

Answer 1

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

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

所以，可能的情况是，您的HTML存在问题，而您的第一个停靠点应该是W3C Markup Validation Service。使用它来验证您的HTML。 HTML验证后，再次尝试使用CSS。如果它仍然坏了，请回到这里。

Answer 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"

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

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

2 个答案: