さまざまなブラウザで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

IE9とChromeは（私はあなたがクロームが問題を引き起こしていた言及した理由は、多分私は「何かがありますかわからないのFirefoxと同じように見えるなど、あなたの問題は、IE8、IE7で単純にHTML5のサポートで表示されます見ない？）。

IEを修正するには、このコードをHEADタグに追加するだけでHTML5 Shivを追加することをおすすめします。ここで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シヴがあなたのために行いますHTML5をサポートしようとしていると信じています。

はここであなたのための更新フィドルです：助けhttp://jsfiddle.net/JeWfB/1/

願っています！ 乾杯！