CSS列表项包装到下一行 - 但仅限于IE 9

Question

由于某些奇怪的原因，此列表末尾的Home链接仅包含在IE 9中的下一行。不是8，而不是10，不在任何其他浏览器中。知道怎么解决这个问题吗？！该网站是ub-t.com。谢谢！

Answer 1

给#menu-item-36 width 78px {{1}}。应该适合。 （在Chrome中发生了btw）。

这是因为没有足够的空间来容纳它。要么让容器更宽一些，要么给它们一些宽度以适应它们

Answer 2

有很多方法可以解决这个问题。我把this fiddle放在一起展示了几个经过时间考验的解决方案，尽情享受。如果您需要更具体的帮助，您需要将链接发布到页面或粘贴代码。

这是小提琴代码： CSS：

p {
color: #aaa;
}
div#one {
    width:60%;
    margin: 0 auto;
}
div#wrapper, ul#wrapper li {
    /* Setting a common base */
    margin: 0;
    padding: 0;
}
div#wrapper div {
    display: inline-block;
    width: 30%;
    min-height: 100px;
    background: #ccc;
    //margin-right:-4px;
}
#two > div {
    width: 20%;
    float:left;
}

HTML：

<div style="border:#ccc 1px solid">
 <h3>display: inline-block</h3>

<div id="one">
    <div id="wrapper">
        <div>Item one
            <div>one</div>
            <div>two</div>
            <div>three</div>
        </div>
        <div>Item two</div>
        <div>Item three</div>
        </div>
    </div>
    <p>This allows us to control when the elements will break to the next line.</p>
</div>
<br/>
<div style="border:#ccc 1px solid">
    <h3>Float</h3>

    <div id="two">
        <div>one</div>
        <div>two</div>
        <div>three</div>
    </div>
    <div style="clear:both;" name="remove this and the border will no longer contain the elements in the div">                 
</div>
</div>