为Chrome中的最后对齐内联块元素添加了额外空间

Question

我遇到了一个似乎只出现在Chrome中的小问题(在IE10和FF 31中经过测试和确定).

在提供的示例中,存在#message和#link,两者都设置为display: inline-block;使得它们可以垂直对齐到彼此的中间(文本的#message长度可以大大变化).

text-align: justify;已设置#container为确保#message左对齐和#link右对齐.

问题是在某些窗口大小的右边会出现一个小的"空格" #link.

问题:

应该是什么样的:

我实际上想要实现的目标:

如果您查看小提琴并且看不到问题,请尝试重新调整窗口大小.

1. 导致Chrome出现此问题的原因是什么？
2. 有没有办法解决这个问题而不使用浮动(我想保持垂直对齐)？

JS小提琴:

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 的浏览器的后备。由于 Chrome 确实支持当前的 Flexbox 语法一直到版本 21，因此这应该可以安全地消除您的问题。

Codepen 演示

修改CSS

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

#message {
  flex: 1;
}

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

由于 Flexbox 刚开始使用时可能会有点混乱，如果您以前没有使用过它，CSS-Tricks 上有一个很好的概述和示例。我没有足够的声誉点来发布两个以上的链接，但只能谷歌“css技巧flexbox”。

希望这可以帮助。