在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

回答

相關問題