Chrome浏览器在页面初始加载时布局出现问题，但重新加载后问题得到解决？

Question

3

非常奇怪的问题：当我的网页第一次加载时，布局会出现以下问题：

初次加载谷歌浏览器中的破碎布局

如果我刷新浏览器，布局就会被纠正，呈现应有的样子：

如果重新加载则页面显示正确的布局

以下是影响该部分布局的样式：

#cart-container {
    background-color: #000000;
    width: 176px;
    height: 35px;
    float: right;
    margin-top: 74px;
}

我不知道为什么会出现这种情况，也不知道为什么重新加载页面后就可以纠正。有人知道原因吗？

- max7

1

我认为可能是因为在页面加载图像时，浮动元素位置不正确？ - Shawn Wernig

是的，你是否已经为你的图片添加了宽度和高度参数？这有助于页面渲染。 - Ade

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- max7 · Accepted Answer

我发现了问题：元素#cart-container附加了一个类，将其位置设置为相对定位。这与float:right结合使用导致了问题。

为了解决这个问题，我删除了分配相对定位的类，保持float:right，然后调整包含文本（“购物车”）和向下箭头的绝对定位元素。现在一切都很好。