为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

整体问题是你的样式#container类似于你应该如何设计样式#message。 #Container应该只是#message，＃link，＃info的虚构持有者/容器。

尝试删除#container背景颜色红色，而是将其添加到#message。 执行此操作后，您的链接会遇到一些填充问题（我删除了填充：1em）。 接下来，您可以调整#message的宽度％以获得正确的间距。 您会注意到我删除了#container的宽度：90％。

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

Answer 2

似乎问题是由四舍五入的错误引起的。 页面似乎工作，即某些屏幕宽度没有红色间隙。 您可以通过一次重新调整窗口大小来测试。 红色间隙的出现似乎是容器宽度的函数。

这是我的解决方法：

jsFiddle演示

它使用额外的div加上两个垂直对齐技术：

• 使用混合线高技术垂直对齐消息
• 按钮使用绝对定位垂直对齐

CSS（2014年8月26日修订）：

#container {
    color: #FFFFFF;
    background-color: #FF0000;
    position: fixed;
    left: 5%;
    right: 5%;
    bottom: 10px;
}
#tempwrap {
    line-height: 3; /* sets the _outer_ line height of #message as well as height of #link */
    position: relative; /* for positioning #link */
}
#message {
    background: rgba(255, 255, 255, .5);
    line-height: normal; /* the _inner_ line height */
    max-width: 80%; /* room for #link */
    display: inline-block;
    vertical-align: middle;
}
#link {
    color: #000000;
    background-color: #FFFFFF;
    padding-left: 1em;
    padding-right: 1em;
    position: absolute;
    right: 0;
    top: 50%; /* top aligns with middle of parent */
    margin-top: -1.5em; /* the height is 3em so push 3/2em upwards */
}
#info {
    background-color: #008000;
}

Answer 3

我的CODEPEN

对于我的测试，我使用：

• 定位绝对以修复#link的垂直对齐，我修复了他的大小
• 我修改了html struture
• 我修改了宽度以与你的图片进行比较。

HTML

<div id="container">
  <div id="inner_top">
      <div id="message">Lorem 1. Ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum gravida tincidunt. Lorem 1. Aliquam bibendum gravida.nnnnn<br/><p style="color:yellow;text-align:right;margin:0">Read more</p></div> 
      <div id="link"><a  href="#">OK</a></div>
  </div>
  <div id="info">
        Lorem 2. Ipsum dolor sit amet, consectetur adipiscinngg elit. Aliquam bnbibendum       gravidda tinciduntt.
  </div>
</div>

CSS

#container {
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 0;
    left: 0;    
    position: fixed;
    text-align: justify;
    width: 100%;
}
#message {
    color: #FFFFFF;
    position:relative;
    max-width: 80%;
    vertical-align: middle;
    padding-top:1em;
    padding-bottom:1em;

}
#link {
    position:absolute;top:50%;right:0;
    background-color: #FFFFFF;
    color: #000000;
    margin-top:-25px;
    width:50px;
    height:50px;
}
#link a{
  color: #000000;
  position:relative;
  height:15px;
  display:block;
  padding-top:15px;
  text-align:center
}

#inner_top{position:relative;width: 90%; margin: 10px 5%;}

#info {

    color: #FFFFFF;   
    margin: 0;
    width: 90%;
    height:200px;
    margin: 10px 5%;
    overflow-y:auto;

}

Answer 4

简单而最好的黑客 - 尝试演示

注意： margin = -0.5px和transform = 0.99px不会对div#container应用任何额外的边距或宽度，也不会强制transform = 0.99px a#link移动或推送Next Pixel。

测试： Chrome 36和Safari 5.1.7

#link {
    -webkit-margin-start: -0.5px;
    -webkit-margin-end: -0.5px;
    -webkit-transform: translate(0.99px, 0px);
}

/* With Your CSS */
...................

Answer 5

这种情况是使用flexbox布局的完美候选者。 您可以保留现有代码，但添加以下行。 这将使您的原始代码保留为不支持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仍然占据全球.54％市场份额，所以你可能会把-webkit-放在安全的一边）。

因为一开始使用flexbox会有点混乱，如果你没有使用过它，那么在CSS-Tricks的例子中有一个很好的概述。 我没有足够的声望点来发布超过两个链接，但只有谷歌“css技巧flexbox”。

希望这可以帮助。

Answer 6

您可以尝试这些可能对您有帮助的技巧 。

使用float : right的#link也可以做到。

Answer 7

这有点像黑客但增加了保证金权利：-1px; 似乎为我解决了这个问题：

#link {
    background-color: #FFFFFF;
    color: #000000;
    display: inline-block;
    padding: 1em;
    margin-right: -1px;
}

问题是这会在所有其他浏览器中将框右移1个像素。

编辑：设置溢出：隐藏在容器div中可能会解决此问题。

Answer 8

我想我可能已经解决了你的问题。 我一直在摆弄显示：inline-block很多我自己现在然后在webkit浏览器中遇到一些边缘问题，在我的情况下，主要是Safari。 但是，对我来说通常的诀窍就是将父div的字体大小设置为0，然后将子div的字体大小重置为各自的原始字体大小（以像素为单位）。

#container {
...
font-size: 0;
}

#message, #link, #info {
font-size: 16px;
}

修改JS小提琴：

http://jsfiddle.net/vvubdqkk/9/

Answer 9

给予-2px的保证金权利将起作用检查小提琴 ，我已通过调整大小进行测试。

CSS

#link {
background-color: #FFFFFF;
color: #000000;
display: inline-block;
padding: 1em;
margin-right:-2px;
}

有时我们需要做一些奇怪的事情，以使事情有效