0

我将 3 个 div 设置为 float:left，以便显示为 3 列。Chrome 和 FF 中的一切看起来都不错，但资源管理器将最左侧的 div 弹出到比其他两个 div 更高的位置。

这似乎不是楼梯效果，因为第一个 div 是唯一一个错位的 div。其他两个 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;
}

我在网上看到过类似的问题，答案是将 display:block 添加到我的容器 div 中。但我试过没有用。

也许我只是做错了，我不知道。寻求帮助是我最后的手段。通常我可以在某个地方找到解决方案，但我觉得我已经尝试了一切。

如果你很快看到这个，你可以在 IE 中看到我在说什么：http: //ihacustombows.com/

谢谢！

更新：我决定只使用 ul 和 li 设置。效果好多了。IE 似乎不能很好地处理浮动 div，但它知道如何很好地显示浮动列表项。

感谢所有的帮助和指点。

4

2 回答 2

1

如果不深入挖掘，IE 有时会在元素向左浮动时将左边距加倍。只是想知道什么可能会影响您的布局。

于 2012-08-02T05:16:13.323 回答
0

我猜这可能是一个问题，即圆形宽度：33.333%。也许将其更改为 33%，看看是否有帮助。

于 2012-08-02T05:09:56.947 回答