Css 第一个浮动：左DIV高于IE中的所有其他值

我将3个div设置为float:left，以便显示为3列。在Chrome和FF中，一切看起来都很好，但explorer正在弹出最左边的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>

我在网上看到过与我类似的问题，答案是将display:block添加到我的container div中。但我尝试过，但没有成功

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

如果你能很快看到这一点，你可以通过IE来了解我在说什么：

谢谢

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

---

谢谢你的帮助和指点

我猜这可能是ie环绕宽度的方式的问题：33.333%。也许把它改为33%，看看是否有帮助。

不要挖得太深，也就是当一个元素向左浮动时，有时会使左边距加倍。考虑一下什么可能会影响您的布局。

由于“home”bows_容器包含三个带有类home_bows的div，因此应将其设置为display:block。内联元素不应包含块级元素，三个home_bows div都是块级元素，因为它们被设置为float:left。@MichaelPeterson这很有意义。谢谢。IE在互联网上运行本身就是一个奇迹。

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