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 Shiv将为您做的HTML5。

这是一个更新的小提琴：http://jsfiddle.net/JeWfB/1/

希望有所帮助！干杯！

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

1 个答案: