在不同瀏覽器中將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頁面佈局對齊

回答

相關問題