Demo Fiddle

Question

Firefox弄乱了里面的span标签。 Chrome，Opera和IE在正确显示格式方面做得很好。

我该如何解决？

这是我的代码：

<div class="navcontainer">
<div class="nav">
    <ul>
        <li><a href="#">Dropdown</a>

            <ul>
                <li><a href="#">One<span class="bubble-info">32</span></a>

                </li>
                <li><a href="#">Two<span class="bubble-warning">32</span></a>

                </li>
                <li><a href="#">Three<span class="bubble-danger">32</span></a>

                </li>
                <li><a href="#">Four<span class="bubble-success">32</span></a>

                </li>
                <li><a href="#">Five<span class="bubble-default">32</span></a>

                </li>
            </ul>
        </li>
    </ul>
</div>

这是我的小提琴http://jsfiddle.net/TgD65/1/

Answer 1

实际上非常简单。将元素设置为浮动时，需要将其放在另一个元素之前。

浏览器首先放置浮动元素，然后放置其余元素。

如果你有，那就在你的李中：

<a href="#"><span class="bubble-info">32</span>One</a>

它适用于所有浏览器。

http://jsfiddle.net/TgD65/5/

Answer 2

尝试将white-space:normal用于.nav ul ul a

Answer 3

Demo Fiddle

更改

的CSS

.bubble-info, .bubble-danger, .bubble-success, .bubble-default, .bubble-warning {

要：

 .bubble-info, .bubble-danger, .bubble-success, .bubble-default, .bubble-warning {
    width: 20px;
    height: 20px;
    display:inline-block;
    position:absolute;
    right:0;
    text-align: center;
    color: #000000;
    font-weight: bold;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #000;
}

并将position:relative;添加到.nav ul ul li li {

这样做是用绝对定位替换气泡的相对位置，并给出它们的块级特征，以便它们可以right:0;对齐。它还删除了浮动，因此您可以避免任何相关问题而不在项目之间清除它。

Answer 4

@Madi，

您必须在position:absolute;中定义Bubbles classes这是Demo。

.bubble-info, .bubble-danger, .bubble-success, .bubble-default, .bubble-warning {
    width: 20px;
    height: 20px;
    float: right;
    text-align: center;
    color: #000000;
    font-weight: bold;
    position:absolute; right:0; top:0; /*Added this line*/
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #000;
}

.nav ul a {
    display:inline-block;
    position:relative; /*Added this line*/
    padding:10px;
}

Firefox奇怪的行为右对齐li标签内的跨度

4 个答案:

Demo Fiddle