开发者

Space on top of content in Firefox

If you visit this page in Firefox 3.6:

开发者_C百科

http://unirazz.com/images/ww/home.html

There is a space of around 10px above the content.

What's causing this extra space on top?


I played around with it and I was able to eliminate a bit of the space by turning off the rule margin: 10px 0; for the "footer" class... of all things. (I am deeply confused by this.)


the problem is with this line:

<div class="clear"></div>

inside the div.header

the clear:both in it's css makes the problem.

delete this tag and instead use the clearfix

like this:

add a class clearfix to div.header:

<div class="header clearfix">

then add these lines to your css:

.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}

please note the second line carefully: content: "";


Firefox gets confused with margin on the page. You can fix it using:

div.content {
   padding: 1px 30px;
}


I could also be an overlapped div that's pushing the content div down. In my situation constraining the upper div to a specific height resolved it.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜