在Safari中可移除的顶部边距，但不是Firefox

我已经使用HTML div标签创建了一个简单的布局。我希望我的页面顶部没有空白（表示没有空格）。我能够在Safari中实现此功能，但由于某些原因，相同的HTML代码不会在Firefox中进行剪切。这里是我的HTML代码jsfiddle：http://jsfiddle.net/WhaGH/在Safari中可移除的顶部边距，但不是Firefox

你不能在jsfiddle看到它，但如果你复制并粘贴到HTML文档的代码，然后用Firefox打开它，有一个约21px的边距页面顶部的高度。如果您在Safari中打开相同的HTML文件，则不会出现此顶部边距。我在其他地方读过不同的浏览器对“html”和“body”标签使用不同数量的默认边距和填充，因此我在“head”中包含了一些CSS，将这些标签的边距和填充设置为0.再次，这适用于Safari，但不适用于Firefox（或者，它适用于左边距，但不适用于Firefox中的上边距）。有谁知道为什么？

来源

2012-03-29 GChorn

这可能是'h1'说都这样做，或者也许是'div'。尝试使用这些元素的边距进行播放......也应该使用Firebug，以便在查看页面时检查浏览器中的边距等。 – joshuahealy 2012-03-29 04:58:39

“你不能在jsfiddle中看到它”：这是因为你已经在左边选中了“Normalized CSS”。它已经完成了你想要实现的功能，以及许多在实际网站中不经常需要的其他“重置”2 /隐藏一些CSS错误，并且“默默地”这样做。 – FelipeAls 2012-03-29 19:10:56

默认的Firefox使用的margin-top看看：21.4333px的标签，并div的标题＃被添加到缩进。

为了防止出现这种情况，请使用padding-top对块的孩子。

h1 { margin-top: 0px; }

修复此问题。

来源

2012-03-29 05:04:39

您已经完成了仅针对body和html的默认值的重置，并为其他元素进行了重置。你可能会考虑使用，在未来，一个CSS复位，在HTML5样板

http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/css/

来源

2012-03-29 04:58:44 mastazi

感谢您的帮助和链接！我想我所需要做的就是重置h1的margin-top值。 – GChorn 2012-03-29 07:17:52

<style type="text/css"> 
    body { margin: 0; padding: 0; } 
    h1 { margin: 0; } 
</style>

来源

2012-03-29 05:01:40

感谢您的帮助！你给了我和马克诺兰基本相同的答案，但我选择他作为“接受的答案”，因为除了代码之外，他给了我一些解释。 – GChorn 2012-03-29 07:16:41

你我以前不明确你的头（加一个属性溢出：隐藏;）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
"http://www.w3.org/TR/REC-html40/loose.dtd"> 
<html> 
<head> 
<style type="text/css"> 
html,body { 
margin:0; 
padding:0; 
} 
</style> 
</head> 
<body style="width: 800px;"> 


<div id="header" style="width:800px; height:100px; background-color: blue; border-bottom: solid black 1px;overflow:hidden;"> 
<h1>This is the Header.</h1> 
</div> 
<div id="leftcolumn" style="width:199px; height: 500px; background-color: red; float:left; border-right: solid black 1px;"> 
<p>This is the left column.</p> 
</div> 
<div id="content" style="width:400px; height: 500px; background-color:gray; float:left;"> 
<p>This is where the content goes.</p> 
</div> 
<div id="rightcolumn" style="width:199px; height: 500px; background-color: green; float: left; border-left: solid black 1px;"> 
<p>This is the right column.</p> 
</div> 


</body> 
</html>

来源

2012-03-29 06:16:13

这可以去掉div元素的边距，但不是头（h1）元素。我不清楚溢出如何工作;也许增加溢出：隐藏到div和H1元素将工作？无论哪种方式，似乎将margin-top：0px添加到h1也解决了问题，并使所有内容更加简洁。 – GChorn 2012-03-29 07:15:27

如果你阅读更多内容，它会崩溃margin http://www.w3.org/TR/CSS2/box.html#collapsing-margins – 2012-03-29 07:26:19

在Safari中可移除的顶部边距，但不是Firefox

回答

相关问题