Margins nicht von IE geehrt

Ich habe ein Formular mit einer Reihe von Fieldsets. Diese Feldgruppen werden bedingt ausgeblendet und serverseitig angezeigt. Daher müssen diese Feldgruppen von links nach rechts von oben nach unten durchlaufen werden. Der Code unten erreicht dies, aber der Rand unten von 10px wird nicht von IE geehrt (IE7 nur getestet).Margins nicht von IE geehrt

Ich lese einige Beiträge, die darauf hindeuten, dass dies mit Margen kollabiert zu tun hat, wenn Sie don; t hinzufügen Polsterung, aber ich habe es versucht und das gleiche passiert. Wie kann ich einen 10px Abstand zwischen 2 Zeilen Feldsets erstellen?

<html> 
<head> 
    <style> 
     fieldset { 
      display: inline-block; 
      width: 30%; 
      height:90px; 
      vertical-align: top; 
      border: 1px solid black; 
      margin-bottom:10px; 
     } 
    </style> 
</head> 
<body> 
    <form> 
     <fieldset> 
      <label>Label:</label> 
      <input type="text"/> 
     </fieldset> 
     <fieldset> 
      <label>Label:</label> 
      <input type="text"/> 
     </fieldset> 
     <fieldset> 
      <label>Label:</label> 
      <input type="text"/> 
     </fieldset> 
     <fieldset> 
      <label>Label:</label> 
      <input type="text"/> 
     </fieldset> 
     <fieldset> 
      <label>Label:</label> 
      <input type="text"/> 
     </fieldset> 
    </form> 
</body>

Quelle

2009-07-29 James Hughes

Für IE 6 und 7

display: inline; 
zoom: 1;

auf einem Block-Element ist zu inline-block gleichwertig, weil zoom löst hasLayout Eigenschaft des IE (mehr darüber lesen here)

Quelle

2009-07-29 08:41:21 eyelidlessness

-1

Ich denke, IE mag inline-block vermasseln - was ist, wenn Sie verwenden Block gerade? Das sollte das Problem beheben.

Quelle

2009-07-29 08:31:15 Meep3D

Nein. Wickelt dann nicht um. Jedes Element befindet sich in einer neuen Zeile. –

Von: http://www.quirksmode.org/css/display.html

In IE 6 und 7 Inline-Block funktioniert nur auf Elemente, die eine natürliche Anzeige haben: inline.

Firefox 2 und niedriger unterstützen diesen Wert nicht. Sie können -moz-inline-box verwenden, aber beachten Sie, dass es nicht das gleiche wie Inline-Block ist, und es funktioniert möglicherweise nicht wie erwartet in einigen Situationen.

Fieldsets haben eine natürliche Anzeige: blockieren, nicht inline, also IE6/7 wird verärgert.

Versuchen Sie Inline-Block zu ändern, um nur zu blockieren (oder "Inline", wenn Sie sie in der gleichen Zeile möchten) und sehen, ob das das Problem behebt.

Quelle

2009-07-29 08:38:53

Wenn Sie die Anzeige von ändern Inline-Block zu Inline, dann funktioniert es in IE7 und FF3.

Quelle

2009-07-29 08:46:55 SvenFinke

Margins nicht von IE geehrt

Antwort

Verwandte Themen