IE7マージンの問題

と助けてくれてありがとう。IE7マージンの問題

余白を使用するとIE7と多少混乱する問題があります。

私はcontanerを持っていて、そのコンテナの中にいくつかのフロートボックスがあります。

これらのボックスには、左端に余白がない最初のボックスと右端に余白がない最後のボックスを除いて、上端、右端、左端、下端が適用されます。

（少なくともこれは私が起こっている何を考えている余裕は各行の最初の要素に適用されていないIE7を除くすべてのブラウザで正常に見える。

を私はDEVを使用してIE7でマージン権を削除した場合ツールと、それが正しく表示されるに戻ってそれをチェック。

は前に？

私は困惑しています。このようなものを見た誰を持っています。

EDIT これはコンテナdivのposition：relativeによって発生しているようです。これを静的に戻すと余白の問題が修正されますが、今はdivがie7で正しく位置合わせされていないことを意味します。誰がなぜポジションの相対的なマージンをねじるだろうか知っていますか？

NEW EDIT 例のダウンロードはここに見つけることができます： www.jimplode.co.uk/content/stackoverflow.zip

誤ったビュー Incorrect

正しいマージン、オフにした後とマージンスタイルの1つだけを再チェックします。 Correct

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>

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; 
}

感謝。

出典

2010-12-13 jimplode

あなたの質問には関係ない話題ですが、IEの角を丸くしたい場合は、コーナーグラフィックを邪魔することなく、[CSS3Pie]（http：// css3pie）をチェックすることをおすすめします。 com）。 – Spudley

ええ、css3はオプションではなく、IE6もサポートする必要があります！ CSS3はまだ完全にはサポートされておらず、一部のビットは依然としてドラフト中です。mozillaやwebkitにpropreitaryスタイルを使わなくても標準コンプライアンスを待つことになります – jimplode

丸いコーナーはSafariとChromeの標準フォームを使用します – Rob

マージンが崩壊することがあります。私は左端にマージンを置いて、余白を残したいと思っていました。最初は0です。

また、浮動小数点数のdivまたは親コンテナで、私たちの旧友 "zoom：1"を試してみてください。しばしばIEの奇妙さをもっとよく見えるように修正します。

出典

2010-12-13 15:38:47

これはうまくいった！あなたはズームスタイルについて説明できますか？ – jimplode

"zoom：1"は "hasLayout"と呼ばれるものをトリガします。 hasLayoutは、DOM要素がInteret Explorerに持つブール値のプロパティです。それを直接設定することはできませんが、他の多くのプロパティを設定するとトリガーが発生し、「ズーム：1」が私の好みの方法です。 http://www.satzansatz.de/cssd/onhavinglayout.htmlよりかなり雄弁な説明 –

答えて

関連する問題