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

嗨，大家好，我已经创建了一个HTML5页面并使用了标签。问题是我使用的CSS文件，如果在Firefox上工作，但工作得很好，但页面布局变得混乱在Chrome和IE8上。这是我简单的CSS文件。在不同浏览器中将CSS与HTML5页面布局对齐

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%; 
}

来源

2012-03-17 Sam007

请过帐您的HTML。更好的是，把它放在JSFiddle.net中，这样我们可以立即帮你编辑它。 – jmbertucci 2012-03-17 17:26:57

@Fozzyuw这里是JSFiddle.net上的链接 http://jsfiddle.net/smaran/JeWfB/ – Sam007 2012-03-17 18:08:22

看来您的问题简直是在IE8，IE7等HTML5支持IE9和Chrome看起来是一样的火狐（我不知道为什么你提到的Chrome是导致一个问题，也许有什么东西我米没有看到？）。

无论如何修复IE，我会建议添加HTML5 Shiv只需在HEAD标记中添加此代码。阅读关于HTML5希夫在这里：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/

希望帮助！干杯！

来源

2012-03-19 02:30:11 jmbertucci

非常感谢@Fozzyuw，这真的很有帮助。是的，它一切都很好。对于我作为CSS3初学者的任何建议，我应该遵循哪些指南？ – Sam007 2012-03-20 03:39:48

@ Sam007我会推荐* A List Apart *（http://www.alistapart.com/）在线杂志，以便在网页开发人员/设计/业务的所有主题上都能很好地阅读。他们还制作了一些很棒的设计小书。看看他们的CSS3和HTML5书籍。还有Aaron Gustafson的自适应网页设计和Dan Cederholm的所有书籍（http://simplebits.com/#books）。 A Book Apart的HTML5/CSS3书籍将帮助您指导您在旧版浏览器中实施它们。我希望这有助于！ – jmbertucci 2012-03-20 14:35:05

再次感谢@Fozzyuw，你是一名救生员 – Sam007 2012-03-20 17:37:19

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

回答

相关问题