css - 在不同浏览器中将 HTML5 页面布局与 CSS 对齐

Question

大家好，我已经创建了一个 HTML5 页面并使用了标签。问题是我正在使用的 CSS 文件，如果在 firefox 上工作正常，但页面布局在 chrome 和 IE8 上变得一团糟。这是我的简单 CSS 文件。

body {
    background-color:silver;
}
header, nav, article, footer, section, aside {
    display:block;
    outline-style: groove;
    outline-color: Black;
    outline-width:thin;    
    line-height:normal;   
    margin-bottom:5px;
}
header {
    background-color:gray;
}
nav {
    float:left;
    width:20%;
    min-width:120px;
    background-color:White;
}
nav h1 {
    font-size:large;
}
nav li {
    list-style-type:none;
}  
section {
     margin-left:1%;
     float:left;
     width:63%;
}
aside {
    background-color:White;
    float:right;
    width:15%;
}
article {
    /* float:right; */
    float:left;
    margin-left:4px;
    width:99%;
    background-color:White;
}
footer {
    clear:both;
    width:100%;
    background-color:White;
    font-size:100%;
}

Answer 1

看来您的问题只是 IE8、IE7 等对 HTML5 的支持。IE9 和 Chrome 看起来与 Firefox 一样(我不确定您为什么提到 Chrome 导致了问题，也许我没有看到某些东西？ ).

无论如何要修复 IE，我建议通过简单地将此代码添加到 HEAD 标记中来添加 HTML5 Shiv。在此处阅读有关 HTML5 Shiv 的信息:http://code.google.com/p/html5shiv/

<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

这让 IE7 和 IE8 对我来说看起来像 IE9、Chrome 和 FF。而且我相信您也不需要此代码:

<script type="text/javascript">
   if (navigator.appName=="Microsoft Internet Explorer"){
       document.createElement("header");
       document.createElement("nav");
       document.createElement("article");
       document.createElement("footer");
   }
</script>

我相信代码正在尝试支持 HTML5，而 HTML5 Shiv 将为您完成。

这是为您更新的 Fiddle:http://jsfiddle.net/JeWfB/1/

希望对您有所帮助!干杯!