html - CSS 加载不生效？

Question

我有一些 CSS 我一直在努力弄清楚，但由于一些奇怪的原因，它不喜欢在加载时生效。

例如，这是加载后直接出现的样子:

然后，如果我进入检查元素并更改 1 个数字的像素，它将恢复为:

@Niet the Dark Absol 的解决方案:

这可能是由于层次结构问题造成的吗？因为它没有选择 CSS 因为它选择了其他东西？

HTML:

<div class="additionals">
    <ul>
        <li>
            <div class="fa fa-rocket"></div>
            Increase your efficiency.
        </li>
        <li>
            DonorPro = productivity. Say goodbye to hours of data entry, difficult mail merges, and paper pushing.
        </li>
    </ul>
</div>

CSS:

.additionals ul {
    float: left;
    width: 400px;
    display: block;
    margin: 20px 20px;
}

.additionals ul li {
    font-family: 'roboto',sans-serif;
    color: #111;
    font-weight: 300;
    font-size: 16px;
    text-align: left;
    list-style: none;
    width: 400px;
}

.additionals .fa{
    color: #000!important;
    margin: 0 2px 0 0!important;
    position: relative;
    margin-left: -37px;
    font-size: 33px;
    top: 27px;
    left: -6px;
}

JS FIDDLE HERE

Answer 1

我猜测这是因为当浏览器呈现页面时图标字体还没有加载，并且它在加载时没有重新计算流量。

尝试为您的图标元素指定一个 width 和 height。这应该保留流中的空间，以便事物在它周围适本地 float ，而不必触发重新绘制。