佈局問題 - 在Chrome和Firefox中有所不同

無法解決這個問題。基於CSS的哪種風格是正確的？每個'lorem'應該如何在firefox中顯示它自己的行？或像鉻合金一樣分裂？我該如何解決這個問題，這樣兩個瀏覽器看起來都一樣？佈局問題 - 在Chrome和Firefox中有所不同

這裏是我目前

<body> 
     <header>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</header> 
     <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</section> 
     <article>article Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</article> 
     <aside>aside Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</aside> 
     <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</footer> 
    </body>

http://jsfiddle.net/nKHkg/

body { 
    width: 960px; 
    margin: 100px auto; 
    text-align: center; 
} 
header { 
    margin: 5px; 
    padding: 20px; 
} 
section { 
    margin: 5px; 
    padding: 100px; 
} 
article { 
    float: left; 
    margin: 5px; 
    padding: 20px; 
} 
aside { 
    float: right; 
    margin: 0 5px; 
    padding: 20px; 
} 
footer { 
    margin: 5px; 
    padding: 5px; 
}

上面看起來與Firefox相同

在Chrome中，文章和一旁分爲兩列，並期待不均勻的。

來源

2014-03-28 Charles

網站製作部那麼...有什麼問題嗎？ – sbeliv01

也許....爲什麼文章和旁邊是分開的？ – Si8

我正在拉我的頭髮，試圖找出這篇文章有什麼問題，然後決定在Firefox中查看它，它看起來不同。這是正確的，我如何讓這兩個瀏覽器的佈局看起來相同？ – Charles

您所需要做的就是應用良好的網站架構。當整個你需要使用margin，float，display和clear:both

看到區別，現在適當地設置你的容器在FIDDLE

來源

2014-03-28 19:47:24 LOTUSMS

明確適用於大多數彼此相鄰的花車嗎？ – Charles

是的，它清除浮游物[清除]（http://www.w3schools.com/cssref/pr_class_clear.asp） – LOTUSMS

感謝您的幫助！ – Charles

佈局問題 - 在Chrome和Firefox中有所不同

回答

相關問題