Question

这是一段在Firefox（10）

中无法很好显示的HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style>
            * { margin: 0; padding: 0; }
            .block6 { float: left; margin: 0 10px; width: 460px; }
            .block { position: relative; }
            .block:after {
                clear: both;
                content: "";
                display: block;
                margin-bottom: 40px;
            }
            header { margin-bottom: 40px; }
            .wie { text-align: center; }
            .w {
                margin: 0 auto;
                padding: 0 10px;
                text-align: left;
                width: 960px;
            }
        </style>
    </head>
    <body>
        <header>
            <div class="wie">
                <div class="w">
                    <div class="block">
                        <div class="block6">
                            aa
                        </div>
                        <div class="block6">
                            bb
                        </div>
                    </div> <!-- block -->
                </div> <!-- w -->
            </div> <!-- wie -->
        </header>
    </body>
</html>

问题在于显示顶部的“额外”空间。如果我设置：

header {
    margin-bottom: 0;
}

额外的空间消失了。我认为错误是在block或block6类中。有什么建议吗？

在Chrome中显示效果很好。

编辑：

这是一个链接：http://jsfiddle.net/wARzA/

Answer 1

这是一个奇怪的错误，但许多事情，如设置顶部边框使错误消失。也许最干净的方式是：

header { min-height: 1px; }

Answer 2

这是问题所在。标头的下边距为40px。里面的内容都是浮动的，所以标题永远不会占据任何高度。这就是底部边距出现在最顶层的原因。

用填充替换边距。 See this jsFiddle

Firefox上的HTML显示效果不佳

2 个答案: