浏览器图像渲染破坏CSS内联块布局 [英] Browser image render break css inline-block layout

问题描述

我有2 div与50％的宽度和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& h2>< img src =/ sites / default / files / styles / logo_150x150 / public / 2016-12 / team_logo-2000x2000.png？itok = L_wkCsC6width =150height =150alt =Arsenal logo typeof =Imageclass =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=vZlNXq8Jwidth =150height =150alt =West Bromwich Albion标志typeof =Image类别=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; 
} 
  

这是现场网站：

但是它不能正确呈现。

1. 首次载入时，布局分割为两行，如下所示：

Chrome在电脑上（调整窗口宽度小于1024像素在iOS / Android 上有此问题，Safari上的Safari也有这个问题。

Firefox， 没有问题。

2. 点击首页按钮或点击某事然后返回




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





当第二次加载，





我在这里录制视频：



1. Chrome在PC上（在30秒时，我按Ctrl + F5忽略快取重新载入）： https://streamable.com/8xpdx


2. Chrome上的Chrome： https://streamable.com/3bu5y



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





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





我知道有2个inline-block元素之间有一个空格，所以i 已删除空间：如何删除inline-block元素之间的空格？





我不知道这里有什么错误，请帮助。

解决方案

我的上帝，我解决了这个问题，只是移动div.versus-wraper到最后的span.field内容，一切都变得很好。



但仍然不知道为什么它会出现问题，仍然是我的一个神秘。有东西要学习，如果有人知道，请回答。




I have 2 div with 50% width and inline-block, on this div have a image. I'm expected 2 div will stay in one line, but sometime, browser break the layout.

Here is 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>

Here is 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;
}

Here is live website: http://bongdatv.net (please inspect to the code.)

As i say, I'm expected 2 div will stay in one line, like this :

But it not render correctly.

1. When first load, layout break to 2 lines like this:

Chrome on PC (resize windows width less than 1024px for mobile responsive) and Chromme on IOS/Android have this problem, Safari on IOS have this problem too.

Firefox, Edge on PC not have problem.

2. When click on homepage button or click something then go back to homepage, layout become render very good.

So i realize, at the first load (or refresh load), when browser requesting image to server, server not finished respone, browser already finished render the page, when image load finish, browser make a broken layout.

When second load (click on home page again), browser get the image from local cache, layout render is just good, correctly!

I record video here :

1. Chrome on PC (at 30 seconds, i press Ctrl+F5 for ignore cache reload) : https://streamable.com/8xpdx
2. Chrome on IOS : https://streamable.com/3bu5y

I can fix this if i add float:left to div.field_home_team-wraper and and div.field_away_team-wraper, but i need to avoid float in my css.

Another fix is remove div.versus-wraper, but i need this div and this div have absolute position, so it not in the line.

I aleady know there a space between 2 inline-block elements, so i removed space in my html : How to remove the space between inline-block elements?

I don't know what wrong here, please help.

解决方案

My god, i solved this problem, just move div.versus-wraper to the last of span.field-content, everything become good.

But still don't know why it make a problem, still a mysterious with me. There are something to learn, if someone know, please answer.

这篇关于浏览器图像渲染破坏CSS内联块布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！