位置与浮动不兼容

Question

绝对位置在 Firefox 和 chrome 中使用 float: left 时似乎有所不同。

Chrome:

火狐：

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

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

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

使用：

Ubuntu 14.04.1 LTS
Google Chrome 39
Firefox v34

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

Chrome:

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

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

Answer 1

你需要设置left/right或top/bottom这是我们使用position: absolute

的主要原因

absolute Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

注：

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

这是一个替代方法：（在 i 和 span 而不是 li 上应用浮点数）

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

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

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

位置与浮动不兼容

position incompatibility with float

html

css