页面顶部的空白区域（Firefox特定） [英] White space on top of page (Firefox Specific)

问题描述

我的页面上方只有firefox中有很大的空白。我试图检查所有元素，找不到任何错误。我也检查了uncollapsing保证金，但无法找到任何。

我使用HTML5，modernzr和jquery。

网站网址： http://devvanickcom.vanickurl.com/

解决方案

这似乎是一个Firefox的错误（＃ 451791 ）。边缘崩溃是错误的。它通过 hr.clear 来折叠，因为它没有高度/填充/边框，导致在 hr.clear ，但它也适用于浮动元素以下90px的正确边距。

通常会防止边距崩溃的任何修补程序都会停止此行为。例如，设置 hr.clear {height：1px} 会把所有东西都拉回来，但是它也会把东西向下移动一个像素，这是不可取的。一个有趣的解决方法是设置 header {padding-top：.001em} 。这不会添加足够的填充来实际地将事物进行视觉上的移动，但足以防止边界超出标题的界限。

或者，你可以重写你的代码来避免这个结构。

I'm getting a big whitespace on top of my page only in firefox. I tried to inspect all elements and can't find anything wrong with it. I also checked for uncollapsing margin but can't find any.

I'm using HTML5, modernzr and jquery.

Website URL : http://devvanickcom.vanickurl.com/

解决方案

This appears to be a Firefox bug (#451791). The margin collapse is done wrong. It collapses through hr.clear, as it has no height/padding/border, resulting in 90px of margin above hr.clear, but it also applies the correct margin of 90px below the floating element.

Any fix that would ordinarily prevent margin collapse will stop this behavior. For example, setting hr.clear { height: 1px } pushes everything back up, but it also shifts things down a pixel, which is undesirable. An interesting fix is to set header { padding-top: .001em }. This won't add enough padding to actually shift things visually, but it counts enough to prevent the margin from collapsing beyond the boundaries of header.

Alternatively, you could just rewrite your code to avoid this structure.

这篇关于页面顶部的空白区域（Firefox特定）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！