【发布时间】：2014-08-27 02:20:29
【问题描述】：
我遇到了一个似乎只在 Chrome 中出现的小问题（在 IE10 和 FF 31 中测试并正常）。
在提供的示例中，有#message 和#link，两者都设置为display: inline-block;，以便它们可以垂直对齐到彼此的中间（#message 中的文本长度可能会有很大差异） .
text-align: justify; 已设置在 #container 上，以确保 #message 左对齐，#link 右对齐。
问题是在某些窗口大小下，#link 右侧会出现一个小的“空格”。
问题：
应该是什么样子：
我真正想要实现的目标：
如果您查看小提琴但看不到问题，请尝试调整窗口大小。
- 是什么导致 Chrome 中出现此问题？
- 有没有办法解决这个问题不使用浮动（我想保持垂直对齐）？
JS 小提琴：
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%;
}
【问题讨论】：
-
不知道为什么会这样，但在
#link上使用float: right;不会破坏垂直对齐并解决问题！！ -
@ImranBughio 感谢您查看，不幸的是，将
#link向右浮动确实会破坏垂直对齐，因为无论文本有多长，它都需要与#message的中间对齐。向右浮动会将#link推到顶部：jsfiddle.net/7pj8rbh3。 -
顺便说一句，当涉及到垂直对齐时，我总是使用 display: table、table-row 和 table-cell 创建一个假表......它就像一个魅力。
-
@ImranBughio 是的，看起来我可能需要走那条路，只是想尝试了解 Chrome 为何会出现此问题，因为它似乎在我测试过的其他浏览器中运行良好！
-
浏览器兼容性通常感觉像是魔法，特别是如果您看过 IE8 及以下时代：p - 在这种情况下，我认为 chrome 以与其他浏览器不同的方式处理 justify 属性。希望我们能找到问题和解决方案。
标签： html css google-chrome