关于IE7中的宽度

Question

我有site。正如你可以看到使用IE7 header的宽度比下面的内容更宽，我的意思是它没有我预期的width: 960px。你能告诉我为什么吗？

这是header标记的代码：

header {
  border-top: 6px solid #9F9F9F;
  margin: 0 auto;
  background-color: $amarillo;
  width: 960px;
  padding: 19px 34px;
}

Answer 1

<header>是IE7的未知元素。

对于所有html5问题，您可以使用html5shiv。

Answer 2

IE7不支持header，nav，footer，article，section等元素。您需要使用HTML5shiv或类似的polyfill。

此外，在默认框模型border-box中，填充将添加到宽度为总元素宽度，因此您的元素为960px + 34px + 34px，而不仅仅是960px。如果您希望从box-sizing: content-box中减去padding而不是添加width，请应用属性{{1}}。