nicht angemeldet
Vertikaler Abstand von <hr>-Elementen im IE
0 0 
MudGuard
Vertikaler Abstand von <hr>-Elementen im IE
Bei der CSS-Formatierung von <hr>-Elementen ist mir aufgefallen, dass der IE größere vertikale Abstände macht als angebeben. Im Beispiel (margin: 1px 0;) lassen Mozilla und Opera genau 1px zwischen den Linien, wogegen der IE ca. 16px freilässt. Wie lässt sich das Verhalten des IEs hierbei erklären? Und warum mach Mozilla 1px Abstand zwischen den Linien, müsste der korrekte Abstand nicht 1px+1px = 2px (boder-top + border-bottom) lauten?
MfG
der Frank
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title><hr>-Test</title>
<style type="text/css">
<!--
hr {
height: 1px;
padding: 0;
border: 0;
color: #000;
background-color: #000;
margin: 1px 0;
}
-->
</style>
</head>
<body>
<hr />
<hr />
<hr />
<hr />
</body>
</html>
-
Hallo,
Bei der CSS-Formatierung von <hr>-Elementen ist mir aufgefallen, dass der IE größere vertikale Abstände macht als angebeben.
Ja, das ist ein bekannter IE-Bug.
Im Beispiel (
margin: 1px 0;) lassen Mozilla und Opera genau 1px zwischen den Linien, wogegen der IE ca. 16px freilässt. Wie lässt sich das Verhalten des IEs hierbei erklären?Erklären lässt es sich nicht, es ist einfach falsch. Soweit ich weiß, gibt es auch keine Lösung.
Workaround: Man verwendet einfach keine HR-Elemente, sondern border-top und/oder border-bottom von vorhandenen Block-Elementen für horizontale Trennlinien.Und warum mach Mozilla 1px Abstand zwischen den Linien, müsste der korrekte Abstand nicht 1px+1px = 2px (boder-top + border-bottom) lauten?
Nein, 1px+1px = 2px (margin-top + margin-bottom), oder wo setzt Du border? Hier gilt allerdings http://www.w3.org/TR/CSS21/box.html#collapsing-margins.
viele Grüße
Axel
-
Hi,
Und warum mach Mozilla 1px Abstand zwischen den Linien, müsste der korrekte Abstand nicht 1px+1px = 2px (boder-top + border-bottom) lauten?
Was jetzt? border oder margin? Das sind zwei völlig verschiedene Dinge.
Vertikale margins kollabieren, borders kollabieren nicht.
Demnach ist (da Du im CSS ja margin benutzt) die Anzeige im Mozilla korrekt.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Was jetzt? border oder margin? Das sind zwei völlig verschiedene Dinge.
Es muss natürlich margin-top + margin-bottom heißen, hab mich vertippt.
Vertikale margins kollabieren, borders kollabieren nicht.
Demnach ist (da Du im CSS ja margin benutzt) die Anzeige im Mozilla korrekt.Alles klar..danke
MfG
der Frank
-