两个div的宽度为50％，内联块仍然不在一行（没有空格）

Question

这是我的网站：

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

你可以在网站顶部看到2个logo（div.field_home_team-wraper和.field_away_team-wraper），我希望它保持在一行，所以我设置它的宽度：50％和内联块，所以这里是什么我想要显示：

但是，在PC浏览器上某些时候，在iPhone浏览器上总是，它会显示如下：

我知道两个内联块div之间有空格，我删除了它，你可以查看源代码来确认。我不知道这里有什么问题，请帮帮忙。

Answer 1

我刚检查了您网站上的代码，但我无法重新创建您在上面描述的问题。但是，我确实注意到Chrome有一些代码不同意 - 也许可以尝试解决其中一些问题，看看它是否能解决问题。

Answer 2

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

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

以下是我的问题将更多解释：Browser image render break css inline-block layout

Answer 3

这是一个已知的错误。

display: inline-block在元素之间创建空格。

以下两种解决方法：

• 首先，如果您使用margin-right: -4px，请始终使用font-size: 0来修复元素之间的空格。

• 第二种方式，在父<div>上使用<div>删除空格，在font-size: 16px内的元素上再次将字体重置为您想要的大小。示例：Box-sizing: border-box

另一个提示，一定要使用PropertyChangeListener，所以无论你设置边框或边距或填充，都不会影响宽度的百分比......