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>结束标记。

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

Answer 1

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

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问题之外，您还有一些背景样式的错误顺序参数。

将它们拆分，或按正确顺序放置。

正确的顺序是：

背景颜色
背景图像
背景重复
背景附件
背景位置

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

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

HTML5标题元素不显示背景图像

4 个答案: