Question

无法弄清楚这一点。哪种风格基于css是正确的？应该每个'lorem'排在它自己的行中，因为它在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中，文章和旁边分为两列，看起来不均匀。

Answer 1

您需要做的就是应用良好的网站架构。在整个网站中创建部分时，您需要使用margin，float，display和clear:both

来适当地设置容器

现在查看FIDDLE

中的差异

布局问题 - Chrome和Firefox不同

1 个答案: