【问题标题】:HTML5 header element not displaying background imageHTML5 标头元素不显示背景图片
【发布时间】:2011-09-24 15:54:48
【问题描述】:

我正在开发一个新的 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

【问题讨论】:

    标签: css internet-explorer html


    【解决方案1】:

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

    【讨论】:

      【解决方案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/

      【讨论】:

        【解决方案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>
        

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

        【讨论】:

          【解决方案4】:

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

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

          正确的顺序是:

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

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

          我很少使用组合(AKA 速记)版本,因为记住顺序太烦人了。

          【讨论】:

          • 他有顺序:图像,位置,重复。据我所知,这样做是不合法的。
          • 仅仅因为它可以在一个浏览器中运行并不意味着它是合法的,或者它可以在所有浏览器中运行。
          • 这是合法的:w3.org/TR/CSS21/colors.html#propdef-background。它适用于所有浏览器。
          • @thirtydot 我查看了您链接的页面,它证实了我所说的:这是不合法的。您需要按该顺序拥有属性,但如果您愿意,可以跳过一些。 @stefan-kendall:你应该在赞美之前核实事实。
          • @Ariel:我的链接没有确认你所说的 - 你误解了它。 The CSS here...is valid.
          猜你喜欢
          • 2021-08-07
          • 2020-09-11
          • 1970-01-01
          相关资源
          最近更新 更多