Html 仅在firefox中，正文后面的div会导致较大的上边距_Html_Css_Firefox

Html 仅在firefox中，正文后面的div会导致较大的上边距

html css firefox

Html 仅在firefox中，正文后面的div会导致较大的上边距,html,css,firefox,Html,Css,Firefox,我已经查看了以前的答案，但它们都与浮动元素等页面相关。这是一个简单的页面，其中包含一个h1和p元素： <body> <div class="title"> <h1 id = "main_title">Chocolate Eclairs</h1> </div> <div class="main"> <p>A simple french treat.</p

我已经查看了以前的答案，但它们都与浮动元素等页面相关。这是一个简单的页面，其中包含一个

h1

和

元素：

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

这会在页面顶部产生一个间隙，

body

不是从顶部开始的

如果我注释掉第一个

div

元素，使其以

h1

开头，它将消失：

那么，我该如何解决这个问题呢？“我的页面”依赖于以div元素开头，firefox（26.0）是唯一一款提供此功能的浏览器。

尝试将与body相同的样式设置为html：

html,body{   background-color: pink; margin: 0; }

使用这个css，只是在h1样式中添加了一个边距：0px

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

这里是

您看到的是元素上的默认样式。你需要看看css重置，一个流行的是

通常我所做的，就是在样式表的顶部这样做

* {
  margin:0;
  padding:0;

 /* A better box model */
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
  box-sizing:border-box;
}

选择所有元素，并删除边距和填充。也可以使用框大小：边框框。这是一个更加直观的CSS框模型。其中，填充和边框不会添加到元素的实际设置宽度中

默认情况下，标题标记H1、H2等具有顶部边距。Firefox中未正确包含顶部边距

尝试h1{填充：0；边距：0}来调试问题。然后使用填充顶部替换边距顶部

我建议你不要使用重置表。它们会带来副作用。

你被和咬过。在某些情况下（在中详细阐述），子元素的边距（在本例中为

h1

）将被转移到封闭元素。但是，您的文档没有

DOCTYPE

，因此浏览器进入怪癖模式，并非所有规则都得到遵守。在这种情况下，Firefox似乎仍然遵守这一规则，但其他浏览器可能不会

解决办法是

在文件顶部添加适当的

DOCTYPE

<!DOCTYPE html>

检查h1上的计算样式-可能会有一个页边空白顶部。在cssIt中显式设置为0，这不仅与Firefox相关，而且每个浏览器都会这样做@MarcB为你的问题给出了答案。@MarcB谢谢，这就解决了问题！奇怪的是，我如何需要更改

h1

元素，即使它显示

主体

是从下开始的。这是同一个bug还是其他bug？@regulus我已经在Chrome上试过了，比如Safari——除了它之外，没有一个在顶部产生额外的边距firefox@tgun926当前位置我不认为这是一个错误。如果元素的第一个子元素具有边距，并且满足某些其他条件，则该边距将移动到该父元素。由于怪癖模式，您可能会遇到差异。尝试添加HTML5

DOCTYPE

，您可能会在浏览器之间获得更一致的行为。

* {
  margin:0;
  padding:0;

 /* A better box model */
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
  box-sizing:border-box;
}

<!DOCTYPE html>

h1 { margin: 0; }