html - 在 Chrome 中添加到最后一个对齐的内联 block 元素的额外空间

Question

我遇到了一个似乎只出现在 Chrome 中的小问题(在 IE10 和 FF 31 中测试并正常)。

在提供的示例中有#message和#link，它们都设置为display: inline-block;，这样它们就可以彼此垂直对齐(#message 中的文本长度可能有很大差异)。

text-align: justify; 已在 #container 上设置，以确保 #message 与 左对齐#link 到右边。

问题是在某些窗口大小下，#link 的右侧会出现一个小的“空格”。

问题:

它应该是什么样子:

我实际想要实现的目标:

如果您查看 fiddle 但看不到问题，请尝试重新调整窗口大小。

1. 是什么导致了 Chrome 中的这个问题？
2. 有什么方法可以解决此问题而无需使用 float (我想保持垂直对齐)？

JS fiddle :

http://jsfiddle.net/vvubdqkk/

HTML:

<div id="container">
    <div id="message">Lorem 1. Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum gravida tincidunt.</div> 
    <a id="link" href="#">OK</a>
    <div id="info">Lorem 2. Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum gravida tincidunt.</div>
</div>

CSS:

#container {
    background-color: red;
    bottom: 0;
    left: 0;
    margin: 10px 5%;
    position: fixed;
    text-align: justify;
    width: 90%;
}
#message {
    color: #FFFFFF;
    display: inline-block;
    max-width: 80%;
    vertical-align: middle;
}
#link {
    background-color: #FFFFFF;
    color: #000000;
    display: inline-block;
    padding: 1em;
}
#info {
    background-color: green;
    color: #FFFFFF;
    display: inline-block;
    margin: 0;
    width: 100%;
}

Answer 1

这种情况非常适合使用 flexbox 布局。您可以保持现有代码不变，但添加以下行。这将保留您的原始代码作为不支持 flexbox 的浏览器的后备。由于 Chrome 确实支持当前的 flexbox 语法 all the way back to version 21 ，这应该可以安全地消除您的问题。

Codepen Demo

修改后的 CSS

#container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

#message {
  flex: 1;
}

您需要为代码添加供应商前缀以获得全面的浏览器支持，但由于您只担心 Chrome 中的错误，因此这并不是绝对必要的(不带前缀的支持可追溯到版本 29，尽管版本 27 仍然保留 .54 % 的全局市场份额，所以为了安全起见，您可能会加入 -webkit-。

由于 flexbox 一开始使用起来有点困惑，如果您之前没有使用过它，可以在 CSS-Tricks 上找到一个很好的概述和示例。我没有足够的信誉点来发布两个以上的链接，只能谷歌“css tricks flexbox”。

希望这对您有所帮助。