gpt4 book ai didi

html - 直接在主体之后的 div 仅在 Firefox 中导致较大的顶部边距

转载 作者:太空宇宙 更新时间:2023-11-04 04:07:05 26 4
gpt4 key购买 nike

我查看了以前的答案,但它们都与 float 元素等的页面相关。这是一个简单的页面,只有一个 h1p元素:

<body>
<div class="title">
<h1 id = "main_title">Chocolate Eclairs</h1>
</div>
<div class="main">
<p>A simple french treat.</p>
</div>
</body>

CSS(为清楚起见):

body{   background-color: pink; margin: 0; }
h1{ background-color: blue;}
.main{ background-color: white;}

这会在页面顶部产生一个空白,body 的开始位置不正确。

Starting with a div如果我注释掉第一个 div 元素,使其首先以 h1 开头,它就会消失:

Starting without a div

那么,我该如何解决这个问题?我的页面依赖于从 div 元素开始,而 firefox (26.0) 是唯一产生这种情况的浏览器。

最佳答案

你被quirks mode咬了和 collapsing margins .在某些情况下(在 the standard 中详细阐述),子元素(在本例中为 h1)的边距将转移到封闭元素。但是,您的文档没有 DOCTYPE,因此浏览器会进入怪异模式,并非所有规则都得到遵守。似乎在这种情况下 Firefox 仍然遵守该规则,但其他人可能不会。

解决办法是

  1. 在文件顶部添加适当的DOCTYPE

    <!DOCTYPE html>
  2. 添加规则以移除 h1

    的边距
    h1 { margin: 0; }

关于html - 直接在主体之后的 div 仅在 Firefox 中导致较大的顶部边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21213070/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com