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

Question

我有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>

和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，但它知道如何显示浮动列表项。

谢谢你的帮助和指点。

Answer 1

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

Answer 2

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