1
盒子模型：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盒模型的一些优点吗？还是我只是在这里夸大问题？