位置与浮动不兼容

Question

当使用float：left。

时，Firefox和Chrome中的位置绝对值似乎有所不同

铬：

火狐：

＆＃13;

＆＃13;

.ulfloat{
    text-decoration: none;
}
.ulfloat li{
    float: left;
}
.g-blue{
    background-color: blue;
}

.g-red{
    background-color: red;
    position: absolute;
}

＆＃13;

<div>
    <ul class="ulfloat">
        <li>
            <a>
                <i class="g-blue">as</i>
                <span class="g-red">bs</span>
            </a>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

使用：

• Ubuntu 14.04.1 LTS
• Google Chrome 39
• Firefox v34

这是我用来创建通知徽章的结构，由于此问题，我的通知看起来如下：

铬：

Firefox（这是我想要的行为）：

• 如何修复它以确保浏览器之间的兼容性？
• 哪种行为正确？

Answer 1

您需要设置left / right或top / bottom这是我们使用的主要原因position: absolute

  

绝对不要为元素留出空间。相反，将它定位在   指定位置相对于其最近位置的祖先或   包含块。绝对定位的盒子可以有边距，   它们不会随着任何其他边缘而崩溃。

注意：

您可能希望将position: relative添加到列表元素，因为您在他的孩子身上使用position: absolute。

这是另一种选择:(在i上应用浮点数而不是li上的浮点数）

＆＃13;

＆＃13;

.ulfloat{
    text-decoration: none;
}
.ulfloat i, .ulfloat span{
    float: left;
}
.g-blue{
    background-color: blue;
}

.g-red{
    background-color: red;
    position: absolute;
}

＆＃13;

<div>
    <ul class="ulfloat">
        <li>
            <a>
                <i class="g-blue">as</i>
                <span class="g-red">bs</span>
            </a>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;