Oberer Rand entfernbar in Safari, aber nicht Firefox

Ich habe ein einfaches Layout mit dem HTML-div-Tag erstellt. Ich möchte, dass dort oben auf meiner Seite KEIN Rand (dh kein Leerzeichen) ist. Ich kann dies in Safari erreichen, aber aus irgendeinem Grund schneidet der gleiche HTML-Code nicht in Firefox. Hier ist ein Beispiel meines HTML-Codes: http://jsfiddle.net/WhaGH/Oberer Rand entfernbar in Safari, aber nicht Firefox

Sie können es nicht in Jsfiddle sehen, aber wenn Sie den Code kopieren und in ein HTML-Dokument einfügen und öffnen Sie es dann mit Firefox, gibt es einen Rand um 21px in Höhe oben auf der Seite. Dieser obere Rand wird nicht angezeigt, wenn Sie dieselbe HTML-Datei in Safari öffnen. Ich las irgendwo anders, dass verschiedene Browser unterschiedliche Mengen von Standard-Rand und Padding mit den Tags "html" und "body" verwenden, daher meine Einbeziehung einiger CSS in den "Kopf", die Rand und Auffüllen für diese Tags auf 0 setzt. das funktioniert für Safari, aber nicht für Firefox (oder besser gesagt, es funktioniert für den linken Rand, aber nicht für den oberen Rand in Firefox). Weiß jemand warum?

Quelle

2012-03-29 GChorn

Es könnte das 'h1' sein, dass sie, oder vielleicht die' div' tut. Versuchen Sie, mit den Rändern dieser Elemente zu spielen. Außerdem sollten Sie Firebug verwenden, damit Sie die Ränder usw. im Browser überprüfen können, während Sie die Seite anzeigen. – joshuahealy

"Sie können es nicht in jsfiddle sehen": Das liegt daran, dass Sie auf der linken Seite "Normalized CSS" aktiviert haben. Es tut bereits das, was Sie erreichen wollen und viele andere "resettet", dass 1/in echten Websites nicht oft gesucht wird 2/verstecken einige CSS-Bugs und es tut dies "still". – FelipeAls

in der Zukunft, ein CSS-Reset, haben

standardmäßig Firefox margin-top: 21.4333px für Tag und # Header div wird zur Einrückung hinzugefügt.

Verwenden Sie padding-top zu den Childs des Blocks, um dies zu verhindern.

h1 { margin-top: 0px; }

Dieses Problem beheben.

Quelle

2012-03-29 05:04:39

Sie haben das Zurücksetzen der Standardwerte nur für Body und HTML getan, tun Sie es auch für die anderen Elemente. Sie sollten erwägen einen Blick auf HTML5 Boilerplate zu verwenden,

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

Quelle

2012-03-29 04:58:44 mastazi

Danke für die Hilfe und den Link! Ich denke, alles was ich tun musste, war den oberen Randwert für h1 zurückzusetzen. – GChorn

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

Quelle

2012-03-29 05:01:40

Danke für Ihre Hilfe! Sie gaben mir im Grunde die gleiche Antwort wie Mark Nolan, aber ich wählte seine als "akzeptierte Antwort", weil er mir neben dem Code ein wenig Erklärung gab. – GChorn

Sie did't Ihre Header (fügen Sie einen Eigenschaften overflow: hidden;) klar

<!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>

Quelle

2012-03-29 06:16:13

Dadurch wird der Rand für das Element div, nicht aber das Element header (h1) entfernt. Ich weiß nicht genau, wie Überlauf funktioniert. Vielleicht würde das Hinzufügen eines Überlaufs, der sowohl für die Elemente div als auch h1 verborgen ist, funktionieren. So oder so scheint es, dass das Hinzufügen von margin-top: 0px zu h1 auch das Problem löst und alles ein wenig prägnanter hält. – GChorn

es kollabierenden Rand, wenn Sie mehr lesen http://www.w3.org/TR/CSS2/box.html#collapsing-margins –

Oberer Rand entfernbar in Safari, aber nicht Firefox

Antwort

Verwandte Themen