盒子模型：Internet Explorer与W3C

如今，Internet Explorer的“盒子模型”问题基本上已不再存在。大多数Web开发人员都放置一个<!DOCTYPE>标签来强制遵守标准，并且没有人真正在乎不再支持Internet Explorer 5.5。

但是，一些开发人员提出了主观的，概念性的观点来捍卫IE盒模型。他们声称IE盒子模型比W3C模型更“直观”，因为W3C模型可以测量盒子的内容，而IE模型可以测量盒子本身：

我可以看到他们的观点，但这基本上是一个主观论点，最重要的是符合标准。

但是，由于严重的实际原因，最近我更喜欢IE盒模型。W3C盒模型使将元素动态调整为另一个元素的确切屏幕上像素宽度变得困难。原因是style.width元素的属性未考虑元素在屏幕上的总大小：您还需要考虑任何其他边框和填充。如果两个元素都使用相同的CSS类，这不是问题-但是，如果它们具有不同的 CSS类，这将变得非常困难。

假设我们有两个div：A和B。A在html中硬编码为400px div，而B使用Javascript动态创建。在视觉上，我们希望B为A的确切宽度。在旧的IE Box模型下，这是微不足道的。我们简单地说：B.style.width = A.style.width甚至B.style.width = A.offsetWidth + "px"。

但是对于W3C盒式模型，这并不是那么简单。现在，我们还必须担心样式表。如果B与A具有相同的CSS类，我们可以说B.style.width = A.style.width。但是，如果不这样做，并且出于审美原因，我们可能不希望这样做，那么我们就有麻烦了。现在我们必须考虑A和B的边框和填充中的总像素。如果边框和填充以不一致的单位指定（由于边框通常为1px线，而边框通常是1px线，则这是常见的情况）可能在ems中指定）。然后，我们面临着转换为通用单位（em到px或px到em）的准不可能完成的任务。所有这些只是为了使两个div完全在屏幕上对齐。

因此，基本上，W3C盒子模型迫使我们在设置元素大小时考虑CSS边框和填充问题，而IE盒子模型则没有，因为宽度测量的是整个盒子的大小（尾到-end），而不是包装盒中的内容。这使得相对于元素动态调整大小变得容易得多。

所有这些似乎是一个非常有力的理由，而不是W3C模型来支持IE盒模型（至少从概念上讲-当然，实际上IE盒模型已经失效）。

问题：W3C为什么选择此盒型？我根本没有看到W3C盒模型的一些优点吗？还是我只是在这里夸大问题？

是否在宽度中包括填充和边框是任意的。唯一重要的是建立多列布局。但是，您应该考虑到当时人们仍然使用表格进行布局这一事实。因此，对于他们来说，关注似乎还不那么重要，他们认为能够指定内容本身在CSS中所占据的确切宽度似乎更有价值。

对于当今的开发人员来说，情况似乎完全不同，因为他们使用CSS进行布局，并且必须处理CSS装箱模型。值得庆幸的是，我们有能力覆盖装箱规则，因此在大多数情况下，样式表顶部的简单规则非常有效：

* {
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

在这个问题上引用Jeff Kaufman的话：

但是，鉴于规范以另一种方式对其进行了定义，它将发送给Microsoft以采用他们的误解的信号对网络不利。微软已经在使用一种拥抱，扩展和扑灭的方法，他们故意制造与竞争对手不同的产品，以将用户锁定在Microsoft版本中。他们非常接近于成功使用网络：大约从2000年到2005年，IE如此流行，以至于有许多网站专门为此设计。那么，在这里采用IE的方法可能会告诉微软“您可以使用IE做任何您想做的事，我们将调整标准使其合法”。

因此，盒式计算机成为W3C和Microsoft之间权力斗争的受害者。