Css Firefox奇怪的行为右对齐li标记内的跨距

Firefox搞乱了li内部的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>

这是我的小提琴，麦迪

您必须定义

位置：绝对在
气泡类中
以下是

尝试对
使用
空白：normal
。nav ul a

更改的CSS

.bubble info、.bubble danger、.bubble success、.bubble default、.bubble warning{

致：

并将
位置：相对；
添加到
.nav ul ul li{

这样做的目的是将气泡的相对定位替换为绝对定位，并为它们提供块级特征，以便它们可以被赋予右对齐的
权限：0；
。它还删除了浮动，因此您可以避免任何相关问题，而不必在项目之间清除它。
实际上非常简单。当您设置元素要浮动，需要将其放在另一个元素之前

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

因此，在您的li中，如果您有：

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



它将在所有浏览器中工作


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

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