Question

当用户第一次加载页面时，我的网站上的文字似乎与左边对齐的那一刻出现了问题。刷新或返回同一页面后（在同一个标签页面中），它可以正常工作。

目前，我有一个带有网站徽标的div和一个带有文本文本的div。我认为问题与徽标加载速度不够快有关，导致文本div基本上忽略了带有徽标的div。

是否有任何可用的解决方案可以通过确保在呈现CSS之前加载图像或者确保div保持在完全相同的位置即使它们没有任何内容的解决方案来阻止这种情况？

（CSS样本）

div.topbar div.logo{
    margin-left: 15%;
    margin-top: 1px;
    margin-bottom: 1px;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 100%;
}

div.topbar div.navigation{
    display: inline-block;
    position: absolute;
    top: 0;
    margin-left: 25%;
    font-family: 'Open Sans Light', sans-serif;
    font-size: 15px;
    margin-top: 10px;
}

Answer 1

这是建议在HTML 中指定图像的尺寸的主要原因。

<img width="..." height="..." src="...">

即使加载图片和/或CSS文件有延迟，上面的代码也会保持您的版面完好无损。

更多信息：

Should I specify height and width attributes for my IMGs in HTML?

Answer 2

指定徽标容器的width和height。

div.topbar div.logo {
    /* other stuff */
    width: 400px;
    height: 100px;
}

页面首次加载时，文本与屏幕左侧对齐

2 个答案: