css - IE7 和 8 忽略设置为标题元素的最大宽度

Question

我有一个带有以下 CSS 的 header 元素。 IE7 和 8 忽略了 max-width 属性。如果我将 header 更改为 div 那么它就可以工作。

.header {
  display: block;
  width: inherit;
  max-width: 1200px;
  position: relative;
  margin: 0 auto;
  float: none;
}

这是行不通的:

<header class="header">
//stuff
</header>

这是有效的:

<div class="header">
//stuff
</div>

Answer 1

被忽略的不是max-width。它是 header，它是一个 HTML 5 元素，因此不受 IE 7 和 8 的支持。

检查 http://www.caniuse.com浏览器兼容性。

考虑 modernizr.com作为解决方法。来自网站:

All web developers come up against differences between browsers and devices. That’s largely due to different feature sets: the latest versions of the popular browsers can do some awesome things which older browsers can’t – but we still have to support the older ones.

Modernizr makes it easy to deliver tiered experiences: make use of the latest and greatest features in browsers which support them, without leaving less fortunate users high and dry.