布局问题 - 在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中有所不同

回答

相关问题