Question

我正在处理这个HTML：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <title>templates</title>
      <meta name="description" content="" />
      <meta name="author" content="wobben" />
      <meta name="viewport" content="width=device-width; initial-scale=1.0" />
      <link rel="shortcut icon" href="/favicon.ico" />
      <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
      <link rel="stylesheet" href=styles.css"> 
 </head>
 <body>
   <div id="container">
       <header>
           <img src="http://www.tamarawobben.nl/images/3.jpg" alt="" width="750" height="225" />
       </header>
       <nav>
           <p><a href="/">Home</a></p>
           <p><a href="/contact">Contact</a></p>
       </nav>
      <footer>
        <p>&copy; Copyright  by wobben</p>
     </footer>
 </div>
 </body>
 </html>

在旧的CSS中，标题的名称为#header。是那样的吗？我问，因为他的图像在另一个地方，然后是旧的html4代码。

我确实改变了一切，但仍然没有运气。

我将此作为html：

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title></title>
 <meta name="description" content="">
 <meta name="author" content="">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" href="style.css">
 <script src="/js/modernizr-2.0.6.min.js"></script>
 </head>
 <body>
 <div id="container">
     <header>
        <img src="http://www.tamarawobben.nl/images/3.jpg" alt="" width="750" height="225" />
 </header>

我的css中有这个：

  header {display: block; height: 225px; width: 758px; margin: 0 1px 10px 1px; background: #fff;}
  #container {
width: 760px;
margin: 10px auto;
padding: 1px 0;
text-align: left;
background: #fff;
color: #303030;
   }

但是图像仍然在左侧而不是居中。

任何人都可以再次帮助我。

鲁洛夫

Answer 1

如果你使用上面的<header>而想要样式，那么你应该在样式表中执行以下操作

header{
    display:block;
    //OTHER STYLES YOU WANT
}

在某些浏览器中，header被视为inline元素。

此外，所有低于9的IE都不会在DOM中呈现这些元素....因此它们根本不显示。

解决此问题的一种方法是使用脚本onload在DOM中创建这些元素。像

这样的东西

var e = ("abbr,article,aside,audio,canvas,datalist,details, 
figure,footer,header,hgroup,mark,menu,meter,nav,output,
progress,section,time,video").split(',');

for (var i = 0; i < e.length; i++){
    document.createElement(e[i]);
}

数组中的换行符仅适用于SO格式

Answer 2

如果您想在支持旧浏览器的同时使用新的HTML5代码，则确实需要使用Modernizr。它将帮助您的页面处理较新的标记，并在不支持CSS3的浏览器上优雅地降级。

阅读本文以获得更好的解释：http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/

要直接回答您的问题，请使用Jason提供的语法：

header { display: block; }

Answer 3

为了清除这个烂摊子，标题，导航，页脚标签的时代实际上已经到了。每个主要的浏览器（chrome，safari，firefox，opera）都支持它，所以你不能说它还没有到达。如果您想支持未来，请使用它们。但是，如果你有一个90岁以上的客户，那就不要为自己省事了。

div css3名称问题

3 个答案: