HTML5 标头元素不显示背景图片

Question

我正在开发一个新的 HTML5 模板。我在页面上使用<header></header> 元素和一个简单的徽标背景图片。

header{ width:100%; height:100px; background:url(/dev-acn/img/header-logo-bg.jpg) 45px center no-repeat; }

开发页面：http://www.bcidaho.com/dev-acn/index.asp

我可以在 PC Chrome、PC FF4 和 MAC FF5 上看到背景图像，但是它不会在 IE6、IE7 或 IE8 中显示……当我在 IE8 中打开开发人员工具时，由于某种原因出现代码检查器中没有打开 <header> 元素标签，只有 </header> 结束标签。

即使我在 style.css 中定义了属性，IE 是否也无法识别 <header> 元素？ （位于：http://www.bcidaho.com/dev-acn/css/style.css）

Answer 1

您需要包含html5shiv，它将新的语义HTML5 元素转换为块级元素，以便IE 可以设置它们的样式。这是一个简单的 hack，因此请检查源代码以了解它在做什么。

Answer 2

IE 不能识别 元素，即使我有属性 在 style.css 中定义？

正确。对于IE9以下的版本，你需要使用这个：

http://code.google.com/p/html5shiv/

你还需要这个 CSS：

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

有关一些背景信息，请参阅：

http://paulirish.com/2011/the-history-of-the-html5-shiv/

Answer 3

我知道这个问题已经解决了，但是我找到了一个不同的解决方案 http://orderedlist.com/resources/html-css/structural-tags-in-html5/。

只需将此脚本添加到页面顶部，新的 HTML5 元素就会在旧版本的 IE 中正确呈现。

<script type="text/javascript">
    document.createElement('header');
    document.createElement('footer');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('nav');
    document.createElement('article');
</script>

对于我们不想依赖外部资源的纯粹主义者来说，这是一个不错的选择。 :)

Answer 4

除了 HTML5 的问题之外，您还有一些参数的背景样式顺序错误。

将它们分开，或按正确的顺序排列。

正确的顺序是：

1. 背景色
2. 背景图片
3. 后台重复
4. 背景附件
5. 背景位置

你可以跳过一些，但必须按照正确的顺序。

我很少使用组合（AKA 速记）版本，因为记住顺序太烦人了。