css - float /容器类的 Bootstrap 问题

Question

我在 IE 中遇到 Bootstrap 问题。它涉及到 .pull-right类只是 float <div>向右。

这是一个视觉演示:

Chrome 28

IE10

菜单是使用 KendoUI 构建的，我的站点使用 Bootstrap v.2.3.2 RC2。我不知道 IE10 有任何兼容性问题。这个问题不会出现在 IE9 或更低版本中，这很奇怪。

代码如下:

<div class="main-ui-nav">
    <div class="container">
            <ul id="menu">
                <li>
                    Customer
                    <ul>
                        <li><a href="main-customer.php">Customer Details</a></li>
                    </ul>
                </li>

                <li>
                    Products
                    <ul>
                        <li><a href="main-products.php">View Products</a></li>
                    </ul>
                </li>

                <li>
                    Sites
                    <ul>
                        <li>Add Site</li>
                        <li><a href="main-sites.php">View Registered Sites</a></li>
                    </ul>
                </li>


                <li>
                    Payments
                    <ul>
                        <li>Invoices</li>
                        <li>Agreements</li>
                        <li>History</li>
                        <li>Oustanding</li>
                        <li>Statements</li>
                    </ul>
                </li>                    

                <li>
                    Notes
                    <ul>
                        <li><a href="create-note.php">Create Note</a></li>
                        <li>Amend</li>
                        <li><a href="main-notes.php">View</a></li>
                    </ul>
                </li>                    

                <li class="pull-right">
                    Session Options
                    <ul>
                        <li><a href="includes/account/dectivate-account.inc.php">Exit Account</a></li>
                        <li><a href="logout.php">Logout</a></li>
                    </ul>
                </li>

                <li class="pull-right">Creation Options
                    <ul>
                        <li>Create Payment</li>
                        <li><a href="create-note.php">Create Note</a></li>
                        <li>Create Invoice</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

提前感谢您的帮助。

---

JS fiddle :http://jsfiddle.net/davcpas123/QFdTN/8/embedded/result/

Answer 1

这个问题是由于 KendoUI 覆盖了标准的 .clearfix 类。

为了解决这个问题，我添加了:

.clearfix {
    clear:both;
}

到我的 ui-full.css 文件。