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中定义了属性（位于：http://www.bcidaho.com/dev-acn/css/style.css），IE是否不识别<header>元素？

- tony noriega

Answer 1

你需要包含html5shiv，将新的语义化HTML5元素转换为块级元素，以便IE可以对它们进行样式设置。这是一个简单的技巧，因此请查看源代码以了解它的确切作用。

- Stefan Kendall

Answer 2

即使我在style.css中定义了属性，IE是否不识别该元素?

正确。对于低于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/

（本文主要涉及IT技术，介绍HTML5 shiv的历史）

- thirtydot

Answer 3

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

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

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

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

- MadHenchbot

Answer 4

除了HTML5问题外，您还将一些背景样式参数放错了顺序。

将它们拆分或按正确顺序排列。

正确的顺序是：

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

您可以跳过其中一些，但必须按正确顺序排列。

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

- Ariel

---

他的顺序是：图像，位置，重复。据我所知，这样做是不合法的。 - Ariel

仅仅因为在一个浏览器中能够运行并不意味着它是合法的，或者它会在所有浏览器中都能够运行。 - Ariel

合法：http://www.w3.org/TR/CSS21/colors.html#propdef-background。它在所有浏览器中都可以正常工作。 - thirtydot

@thirtydot 我看了你链接的页面，它证实了我的说法：这是不合法的。你需要按照那个顺序拥有属性，但如果你愿意，可以跳过一些。@stefan-kendall：在赞扬之前，你应该验证事实。 - Ariel

@Ariel：我的链接并没有证实你所说的 - 你误解了它。这里的CSS......是有效的。 - thirtydot

@thirtydot 点这里：http://old.nabble.com/ordering-of-background-shorthand-properties-td27399019.html，看起来像是 css3 或 css2.1 放宽了规则。还要注意验证器打印属性时如何重新排序它们。而且我们似乎不是第一个注意到歧义的人：http://csarven.ca/css-background-order-and-w3c-specification-ambiguity-in-browsers 当我阅读规范时，我看到 BNF 以严格的顺序排列，但我猜其他人将其视为仅是一系列选项。 - Ariel