2

誰かが助けてくれることを願っています。コンテナー DIV 内に、1 行に並べて配置する必要がある 3 つの画像があります。これは実際、IE6、IE7、IE8 (うめき声) を除いて、他のすべてのブラウザーに当てはまります。

各画像は、次のようにタグでラップされています。

<div id="images">

<a href="images/image01.jpg" rel="milkbox[group]" title="my image details01"><img src="images/image01b.jpg" width="98" height="92" alt="my image details01" class="img01"></a>

<a href="images/image02.jpg" rel="milkbox[group]" title="my image details02"><img src="images/image02b.jpg" width="98" height="92" alt="my image details02" class="img02"></a>

<a href="images/image03.jpg" rel="milkbox[group]" title="my image details03"><img src="images/image03b.jpg" width="99" height="92" alt="my image details03" class="img03"></a>


</div><!--end of images-->

私のCSSは次のとおりです： -

    /* Global reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: inherit;
     font-style: inherit;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
    }
    a img, :link img, :visited img {
     border: 0;
     display:block;
     }

    img{
    display:block;
    }
    /* End Global reset */

#images{
width:295px;
clear:both;
border:none;
margin-top:30px;
}

#images a:link{
text-decoration:none;
border:none;

}
#images a:visited{
text-decoration:none;
border:none;    
}
#images a:hover{
text-decoration:none;
border:none;

}

img.img01,img.img02 {
width:98px;
float:left;

}

img.img03{
width:99px;
float:right;

}

何をしてもIEの表示を修正できないようです。IE は各画像の左右に追加のパディングを追加しています。その結果、2 つの画像が行内にのみ表示され、3 番目の画像がその下に表示されます (右に浮いて表示されます)。

すべての空白を削除しようとしましたが (他の場所で出くわした提案)、それは役に立ちませんでした。私も負のマージンで遊んだことがありますが、実際に何が起こっているのかを理解せずにそのルートをたどりたくありません.

ここで実際に何が起こっているのか、どうすれば解決できるのか、誰かに光を当てることはできますか? -それは私を夢中にさせています！

よろしくお願いします。

4

2 に答える 2

2

IE には空白の問題があります。タグ間のスペースを削除して、1 行にまとめてみてください。

<div id="images"><a href="images/image01.jpg" rel="milkbox[group]" title="my image details01"><img src="images/image01b.jpg" width="98" height="92" alt="my image details01" class="img01"></a><a href="images/image02.jpg" rel="milkbox[group]" title="my image details02"><img src="images/image02b.jpg" width="98" height="92" alt="my image details02" class="img02"></a><a href="images/image03.jpg" rel="milkbox[group]" title="my image details03"><img src="images/image03b.jpg" width="99" height="92" alt="my image details03" class="img03"></a></div>
于 2009-11-27T19:58:14.357 に答える
1

IE が幅を計算する方法を確認する必要があります。3 つの画像の合計幅は 295 で、div の合計幅は 295 です。div の 295 幅は div の外側から測定され、残念ながら div のコンテンツ領域は 295 未満です。実験として増加div の幅を調整し、画像が適切に表示されるかどうかを確認します。

これは、それを説明する 1 つのページです。Google で IE Box Model を検索するだけです。

于 2009-11-27T16:04:00.113 に答える