浏览器图像渲染中断 css 内联块布局答案

【问题标题】：Browser image render break css inline-block layout浏览器图像渲染中断 css 内联块布局
【发布时间】：2017-05-10 03:59:54
【问题描述】：

我有 2 个 50% 宽度和内联块的 div，在这个 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 将保持在一行中，如下所示：

但它不能正确渲染。

第一次加载时，布局分为 2 行，如下所示：

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

Firefox，PC 上的 Edge 没有问题。

当点击主页按钮或点击某物返回主页时，布局变得非常好。

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

第二次加载时（再次点击首页），浏览器从本地缓存中获取图片，布局渲染刚刚好，正确！

我在这里录制视频：

PC 上的 Chrome（在 30 秒时，我按 Ctrl+F5 忽略缓存重新加载）：https://streamable.com/8xpdx
IOS 上的 Chrome：https://streamable.com/3bu5y

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

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

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

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

【问题讨论】：

Re: 如果没有一个损坏的例子，很难说哪里出了问题，但现在似乎已经修复了。

标签： html css layout browser responsive-design

【解决方案1】：

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

但还是不知道为什么会出问题，对我来说还是个谜。有什么要学习的，如果有人知道，请回答。

【讨论】：