仅当包含h1元素时，全屏div向下移动

以下网页的IE和Chrome呈现正确预期：含有红全屏格，没有滚动条：

<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <title>title</title> 
    <style> 
     html { 
      background-color: purple; 
     } 
     body { 
      background-color: blue; 
      height: 100%; 
      margin: 0; 
     } 
     #main { 
      background-color: red; 
      min-height: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div id="main"> 
     <h1> 
      some text 
     </h1> 
    </div> 
</body> 
</html>

但是，对于火狐（27.0.1），我发现：

显示在页面
和垂直滚动条
顶紫线，如果我直接添加一些文字h1元素之前#main格，然后页面呈现预期。

我应该怎么做才能正确地在FireFox中使用h1中的文本进行渲染？

来源

2014-03-06 jozop

更改行高或边距填充。这应该够了吧。玩一些大数字;）

来源

2014-03-06 19:46:53

你必须重置浏览器的CSS。只需将它添加到你的CSS的顶部：如果你想了解这个技巧的详细信息

* { 
    margin: 0; 
    padding: 0; 
} 

// #main h1 { margin:0; } // this snippet will be enough for your case, but with the other you remove every margin and padding made by the browser.

demo JsFiddle

，由克里斯·Coyier阅读this article。

如果你想要一个完整的CSS重置，你应该考虑Reset Reloaded。

来源

2014-03-06 19:48:23 aloisdg

确定。它在FireFox – jozop

@jozef是h1保证金你应该阅读[答案]（http://stackoverflow.com/questions/22234348/full-screen-div-is-shifted-down-when-contains-h1-element-only/22234462？noredirect = 1＃comment33764309_22234462）的CBroe。我没有花时间回答关于问题的第二部分;他做到了。顺便说一下，他给我比我更多的信息。 – aloisdg

以下网页的IE和Chrome呈现正确预期：含有红全屏格

如果这是你会得到什么，那只能是在Quirks模式，我想 - 因为你忘记设置height:100%为html以及没有这个百分比高度为body不是假设以这种方式工作。

并具有正确的文档类型集（和高度为HTML），你在所有的标准相同的结果符合浏览器 - 你认为一个是错误的：http://jsfiddle.net/q6g8Q/1/

这实际上是正确的，但因为的adjoining margins - h1的浏览器样式表中默认的margin-top毗连div的页边距 - 因此它会相应地被压低。

所以设置h1为零的margin-top，和“问题”已经一去不复返了 - http://jsfiddle.net/q6g8Q/2/

来源

2014-03-06 20:08:44 CBroe

仅当包含h1元素时，全屏div向下移动

回答

相关问题