html - 浏览器图像渲染中断 css 内联 block 布局

Question

我有 2 个宽度为 50% 的 div 和 inline-block，在这个 div 上有一个图像。我预计 2 个 div 将保持在一行中，但有时浏览器会破坏布局。

这是 html :

<div class="views-field views-field-title">
    <span class="field-content">
    <div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep"><h2>Arsenal</h2><img src="/sites/default/files/styles/logo_150x150/public/2016-12/team_logo-2000x2000.png?itok=L_wkCsC6" width="150" height="150" alt="Arsenal logo" typeof="Image" class="image-style-logo-150x150"></a></div><div class="versus-wraper">v</div><div class="field_away_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwich-albion-truc-tiep"><h2>West Brom</h2><img src="/sites/default/files/styles/logo_150x150/public/2016-12/West_Bromwich_Albion.png?itok=vZlNXq8J" width="150" height="150" alt="West Bromwich Albion logo" typeof="Image" class="image-style-logo-150x150"></a></div>
    </span>
</div>

这是CSS:

div.view-id-current_match_of_the_day div.views-field-title {
    position: relative;
    margin-bottom: 5px;
}

.view-id-current_match_of_the_day div.field_home_team-wraper, .view-id-current_match_of_the_day div.field_away_team-wraper {
    width: 50%;
    padding-bottom: 1.5em;
}

.view-id-current_match_of_the_day div.field_home_team-wraper, .view-id-current_match_of_the_day div.field_away_team-wraper {
    display: inline-block;
    position: relative;
}

.view-id-current_match_of_the_day div.field_home_team-wraper img, .view-id-current_match_of_the_day div.field_away_team-wraper img {
    width: 40%;
}

.view-id-current_match_of_the_day div.versus-wraper {
    width: 10%;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
}

正如我所说，我预计 2 个 div 将保持在一行中，如下所示:

但它无法正确呈现。

1. 第一次加载时，布局分成两行，如下所示:

PC 上的 Chrome(调整窗口宽度小于 1024px 以实现移动响应)和 IOS/Android 上的 Chromme 有这个问题，IOS 上的 Safari 也有这个问题。

PC 上的 Firefox、Edge 没有问题。

1. 当点击主页按钮或点击某些东西然后返回主页时，布局变得非常好。

所以我意识到，在第一次加载(或刷新加载)时，当浏览器向服务器请求图像时，服务器未完成响应，浏览器已经完成渲染页面，当图像加载完成时，浏览器会破坏布局。

当第二次加载(再次点击主页)时，浏览器从本地缓存中获取图像，布局渲染很好，正确!

我在这里录制视频:

1. PC 上的 Chrome(在 30 秒后，我按 Ctrl+F5 忽略缓存重新加载):https://streamable.com/8xpdx
2. IOS 上的 Chrome 浏览器:https://streamable.com/3bu5y

如果我将 float:left 添加到 div.field_home_team-wraper 和 div.field_away_team-wraper，我可以解决这个问题，但我需要避免在我的 css 中 float 。

另一个修复是删除 div.versus-wraper，但我需要这个 div 并且这个 div 有绝对位置，所以它不在行中。

我已经知道 2 个内联 block 元素之间有一个空格，所以我在我的 html 中删除空格:How to remove the space between inline-block elements?

我不知道这里有什么问题，请帮忙。

Answer 1

我的天，我解决了这个问题，只需将 div.versus-wraper 移动到 span.field-content 的最后，一切都变好了。

但还是不知道为什么会出问题，对我来说还是个谜。有学习的地方，有知道的请解答。