IE7 Margin Ausgabe

und danke für die Hilfe.IE7 Margin Ausgabe

Ich habe ein etwas verwirrendes Problem mit IE7 bei der Verwendung von Margen.

Ich habe einen Container, und in diesem Container habe ich einige Floating-Boxen.

Diese Felder haben Ränder, oben, rechts, links, unten, mit Ausnahme der ersten Box, die keinen Rand auf der linken Seite hat, und der letzten Box, die keinen Rand auf der rechten Seite hat.

Sieht in allen Browsern außer IE7 fein, wo der Marge für das erste Element ist nicht in jeder Zeile Anwendung (zumindest das ist, was ich denke, geschieht.

Wenn ich Rand rechts in IE7 entfernen Sie die Entwickler mit Werkzeuge und überprüfen sie es dann wieder auf sie richtig angezeigt wird.

hat vor etwas gesehen anyone?

ich bin ratlos.

EDIT Es scheint durch Position verursacht werden: relativ auf dem Container divs. Das Zurücksetzen auf statisch behebt das Margin-Problem, bedeutet aber jetzt, dass meine Divs in ie7 falsch ausgerichtet sind. Weiß jemand, warum Positionsverwandte Margen verdrehen würde?

NEW EDIT Beispiel Download finden Sie hier: www.jimplode.co.uk/content/stackoverflow.zip

Falsche Ansicht Incorrect

richtigen Ränder nach unchecking und nur einen der Randstile neu überprüfen. Correct

Die HTML:

<div class="lowerContent"> 
    <div class="mediumContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginBottom"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" /> 
              <div class="textContainer"> 
               <h1>Car Insurance</h1> 
               <ul> 
                <li>Protected NCD for life</li> 
                <li>NCD Accelerator</li> 
                <li>European Cover Included</li> 
                <li>Multiple Drivers and Vehicles</li> 
                <li>Breakdown Cover Included</li> 
                <li>Legal Cover Included</li> 
               </ul> 
               <div class="boxButtons"> 
                <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
               </div> 
              </div> 
              <div class="imageContainer"> 
               <img src="/images/misc/boxphoto_1.jpg" alt="box image 0" /> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginRight contentBoxMarginBottom"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" /> 
              <div class="textContainer"> 
               <h2>Home Insurance</h2> 
               <div class="imageContainer"> 
                <img src="/images/misc/boxphoto_2.jpg" alt="box image 2" /> 
               </div> 
               <ul> 
                <li>Working at home Equipment</li> 
                <li>Helmet and Leathers</li> 
                <li>Legal Cover</li> 
                <li>Caravan Cover</li> 
                <li>Personal Accident Cover</li> 
               </ul> 
               <div class="boxButtons"> 
                <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
               </div> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft contentBoxMarginBottom"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="215" class="fl" /> 
              <div class="textContainer"> 
               <h2>Life Insurance</h2> 
               <div class="imageContainer"> 
                <img src="/images/misc/boxphoto_3.jpg" alt="box image 3" /> 
               </div> 
               <ul> 
                <li>Cover From &pound;5 a month</li> 
                <li>Your loved ones protected</li> 
                <li>Immediate cover available</li> 
                <li>We search, you save</li> 
               </ul> 
               <div class="boxButtons"> 
                <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
               </div> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 
        <div class="emptyClear"></div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginRight"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" /> 
              <div class="imageContainerAlternate"> 
               <img src="/images/misc/boxphoto_4.jpg" alt="box image 4" /> 
              </div> 
              <div class="boxButtons"> 
               <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" /> 
              <div class="imageContainerAlternate"> 
               <img src="/images/misc/boxphoto_5.jpg" alt="box image 5" /> 
              </div> 
              <div class="boxButtons"> 
               <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginRight contentBoxMarginLeft"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" /> 
              <div class="imageContainerAlternate"> 
               <img src="/images/misc/boxphoto_6.jpg" alt="box image 6" /> 
              </div> 
              <div class="boxButtons"> 
               <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 

        <div class="smallContentBox contentBoxMarginTop contentBoxMarginLeft"> 

          <div class="expandableBox"> 
           <div class="topLeft"> 
            <div class="topRight"> 
             <div class="top"></div> 
            </div> 
           </div> 
           <div class="middleLeft"> 
            <div class="middleRight"> 
             <div class="middle"> 
              <img src="/images/frame/transparent.gif" alt="spacer"width="0" height="140" class="fl" /> 
              <div class="imageContainerAlternate"> 
               <img src="/images/misc/boxphoto_7.jpg" alt="box image 7" /> 
              </div> 
              <div class="boxButtons"> 
               <a class="smallButtonLeft" href="#"><span>GET A QUOTE</span></a><a class="smallButtonRight" href="#"><span>FIND OUT MORE</span></a> 
              </div> 
              <div class="emptyClear"></div> 
             </div> 
            </div> 
           </div> 
           <div class="bottomLeft"> 
            <div class="bottomRight"> 
             <div class="bottom"> 
             </div> 
            </div> 
           </div> 
          </div> 

        </div> 
        <div class="emptyClear"></div> 
</div>

Die CSS:

.lowerContent 
    { 
     position:relative; 
     margin:0px 0px 0px 0px; 
    } 

    .expandableBox 
    { 
     display:block; 
     width:100%; 
    } 

    .expandableBox .top 
    { 
     background-image:url("/images/backgrounds/bkg_whitebox_t.png"); 
     background-repeat: repeat-x; 
     height:10px; 
    } 

    .expandableBox .topLeft 
    { 
     height:10px; 
     padding:0px 0px 0px 10px; 
     background-image:url("/images/backgrounds/bkg_whitebox_tl.png"); 
     background-repeat: no-repeat; 
     background-position:left top; 
    } 

    .expandableBox .topRight 
    { 
     height:10px; 
     padding:0px 10px 0px 0px; 
     background-image:url("/images/backgrounds/bkg_whitebox_tr.png"); 
     background-repeat: no-repeat; 
     background-position:right top; 
    } 

    .expandableBox .middleLeft 
    { 
     padding:0px 0px 0px 10px; 
     background-image:url("/images/backgrounds/bkg_whitebox_l.png"); 
     background-repeat: repeat-y; 
     background-position:left top; 
    } 

    .expandableBox .middle 
    { 
     background-color:#FFFFFF; 
    } 

    .expandableBox .middleRight 
    {  
     padding:0px 10px 0px 0px; 
     background-image:url("/images/backgrounds/bkg_whitebox_r.png"); 
     background-repeat: repeat-y; 
     background-position:right top; 
    } 

    .expandableBox .bottom 
    { 
     background-image:url("/images/backgrounds/bkg_whitebox_b.png"); 
     background-repeat: repeat-x;  
     background-position:bottom; 
     height:10px; 
     margin-bottom:7px; 
    } 

    .expandableBox .bottomLeft 
    { 
     height:10px; 
     padding:0px 0px 0px 10px; 
     background-image:url("/images/backgrounds/bkg_whitebox_bl.png"); 
     background-repeat: no-repeat; 
     background-position:left bottom; 
    } 

    .expandableBox .bottomRight 
    { 
     height:10px; 
     padding:0px 10px 0px 0px; 
     background-image:url("/images/backgrounds/bkg_whitebox_br.png"); 
     background-repeat: no-repeat; 
     background-position:right bottom; 
    } 




    .contentBoxMarginLeft 
    { 
     margin-left:10px; 
    } 

    .contentBoxMarginRight 
    { 
     margin-right:10px; 
    } 

    .contentBoxMarginTop 
    { 
     margin-top:10px; 
    } 

    .contentBoxMarginBottom 
    { 
     margin-bottom:10px; 
    } 
.fullContentBox 
{ 
    width:940px; 
    float:left; 
} 

.largeContentBox 
{ 
    width:700px; 
    float:left; 
} 

.mediumContentBox 
{ 
    width:460px; 
    float:left; 
} 

.smallContentBox 
{ 
    width:220px; 
    float:left; 
} 


.mediumContentBox .textContainer 
{ 
    float:left; 
    width:210px; 
} 

.mediumContentBox .imageContainer 
{ 
    float:right; 
    width:210px; 
} 


.smallContentBox .textContainer 
{ 
} 

.smallContentBox .textContainer .imageContainer 
{ 
    float:right; 
    padding:5px 0px 0px 0px; 
} 

.smallContentBox .imageContainerAlternate 
{ 
    float:left; 
    padding:0px 0px 0px 0px; 
} 

a.smallButtonLeft, 
a.smallButtonRight 
{ 
    display:inline-block; 
    background-image:url('/images/backgrounds/bkg_sprites_buttons.png'); 
    height:30px; 
    background-position:left top; 
    background-repeat:no-repeat; 
    padding:0px 10px; 
    line-height:23px; 
    color: #0F4DBC; 
    font-family: Arial,Helvetica,sans-serif; 
    font-weight: bold; 
    text-decoration: none; 
    text-transform: capitalize; 
} 
a.smallButtonLeft:hover 
{ 
    background-position:left -44px; 
} 

a.smallButtonRight 
{ 
    background-position:right -217px; 
    color: #4D4F52; 
} 
a.smallButtonRight:hover 
{ 
    background-position:right -262px; 
} 


.boxButtons 
{ 
    float:left; 
    padding:10px 0px 0px 0px; 
} 

.smallContentBox .boxButtons 
{ 
    width:200px; 
    text-align:center; 
}

Vielen Dank im Voraus.

Quelle

2010-12-13 jimplode

Off-Topic und unabhängig von Ihrer Frage, aber wenn Sie abgerundete Ecken in IE auf eine CSS-freundliche Weise möchten, ohne mit Eckgrafiken herumzuärgern, empfehle ich Ihnen [CSS3Pie] (http: // css3pie. com). – Spudley

yeah, css3 ist keine Option, muss auch IE6 unterstützen !! :(plus CSS3 wird immer noch nicht vollständig unterstützt und einige Bits sind immer noch im Entwurf. Ich würde lieber auf Einhaltung der Standards warten, anstatt propritity Stile für Mozilla oder Webkit – jimplode

verwenden Abgerundete Ecken verwenden das Standardformular in Safari und Chrome. – Rob

Könnte etwas mit Randeinbrüchen zu tun haben. Ich würde versucht sein, nur den Rand links zu haben, dann Rand links: 0 auf dem ersten.

Alternativ versuchen Sie unseren alten Freund "Zoom: 1" auf den floated divs oder dem übergeordneten Container. Oft werden viele der seltsamen IE-Seltsamkeit behoben.

Quelle

2010-12-13 15:38:47

Das hat funktioniert !!! Kannst du den Zoom-Stil erklären ?? – jimplode

"zoom: 1" löst das aus, was als "hasLayout" bekannt ist. hasLayout ist eine boolesche Eigenschaft, die DOM-Elemente in Interet Explorer haben. Sie können es nicht direkt einstellen, aber die Einstellung einer Reihe anderer Eigenschaften führt dazu, dass es ausgelöst wird und "Zoom: 1" ist meine bevorzugte Methode. Deutlich eloquentere Erklärung hier: http://www.satzansatz.de/cssd/onhavinglayout.html –

IE7 Margin Ausgabe

Antwort

Verwandte Themen