0

3 つの div が float:left に設定されているため、3 つの列として表示されます。Chrome と FF ではすべて問題ないように見えますが、エクスプローラーは左端にある div を他の 2 つの div よりも高くポップしています。

最初の div だけが位置がずれているため、これは階段効果ではないようです。他の 2 つの div は互いに同じ行にあります。

ここにHTMLがあります

   <div id="home_bows_container">
        <div id="black_bear" class="home_bows">
            <h4>Black Bear</h4>
            <div id="bow_container">
                <a href=""><img alt="custom traditional longbow" src="images/bows_slider/black-bear.png" class="home_bows left"></a>
            </div>
            <h5>Hybrid Reflex/Deflex Longbow<h5>
            <p class="description">62"-66" 25-70 pounds, Black Limbs, Bamboo core, your choice of riser wood.</p>
        </div>
        <div id="prowler" class="home_bows">
            <h4>Prowler</h4>
            <div id="bow_container">
                <a href=""><img alt="custom traditional longbow" src="images/bows_slider/prowler.png" class="home_bows center"></a>
            </div>
            <h5>3 Piece Take Down Reflex/ Deflex Longbow<h5>
            <p class="description">62"-64" 30-70 pound Clear Glass Veneered Limbs, your choice of veneers and riser wood. </p>
        </div>
        <div id="javalina_two" class="home_bows">
            <h4>Javalina II</h4>
            <div id="bow_container">
                <a href=""><img alt="custom 3 piece longbow" src="images/bows_slider/javalina2.png" class="home_bows right"></a>
            </div>
            <h5>Hybrid Reflex/Deflex Longbow<h5>
            <p class="description">62"-66' 30-70 pound Clear Glass Veneered Limbs, your choice of veneers and riser wood.</p>
        </div>
    </div>

そしてCSS：

    #home_bows_container {
    width:90%;
    min-width:960px;
    text-align:center;
    margin:0 auto;
    overflow:hidden;
    display:inline;
}
.home_bows {
    float:left;
    width:33.33333%;
    text-align:center;
    margin:0 auto;
}
#bow_container {
    display:inline-block;
    margin:0 auto;
    width:102px;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
}
img.home_bows {
    width:102px;
    height:400px;
    margin:0px auto;
}

ウェブ上で同様の質問を見たことがありますが、その答えは私のコンテナ div に display:block を追加することでした。しかし、私はそれを無駄にしようとしました。

多分私はそれを完全に間違っているだけです、私にはわかりません。助けを求めることは私の最後の手段です。通常、どこかで解決策を見つけることができますが、すべてを試したような気がします。

これがすぐに表示される場合は、IE でここにアクセスして、私が話していることを確認できます: http://ihacustombows.com/

ありがとう！

更新: ul と li のセットアップを使用することにしました。はるかにうまくいきました。IE はフローティング div をうまく処理していないようですが、フローティング リスト項目をうまく表示する方法を知っています。

すべてのヘルプとポインタをありがとう。

4

2 に答える 2

1

深く掘り下げないと、要素が左に浮いているときにIEが左マージンを2倍にすることがあります。レイアウトに影響を与える可能性のあるものについて考えてみてください。

于 2012-08-02T05:16:13.323 に答える
0

幅を丸める方法、つまり33.333％に問題がある可能性があると思います。33% に変更して、それが役立つかどうかを確認してください。

于 2012-08-02T05:09:56.947 に答える