Question

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

在提供的示例中，#message和#link都设置为display: inline-block;，以便它们可以垂直对齐到彼此的中间位置（{{1}中的文本可能会在很大程度上改变长度。）

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

问题是，在某些窗口尺寸下，#link右侧会显示一个小“空格”。

问题：

Extra padding applied to OK button

应该是什么样子： No extra padding applied to OK button

我实际想要实现的目标： Actual design that will be used on the site

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

Chrome中导致此问题的原因是什么？
有没有办法解决这个没有诉诸使用浮动（我想保持垂直对齐）？

JS小提琴：

http://jsfiddle.net/vvubdqkk/

HTML：

#link

CSS：

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

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 Demo

它使用额外的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

MY 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

SIMPLE＆amp;最好的 - TRY DEMO

注意： margin = -0.5px和transform = 0.99px不会对div#container应用任何额外的保证金或宽度，也不会强制{{1}移动或推动下一个像素。

经过测试： Chrome 36和Safari 5.1.7

a#link

Answer 5

这种情况是使用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的例子中有一个很好的概述。我没有足够的声望点来发布超过两个链接，但只有Google＆＃34; css欺骗flexbox＆＃34;。

希望这有帮助。

Answer 6

您可以尝试这些可能对您有用的 tricks 。

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保证金权利将检查fiddle，我已通过调整大小进行测试。

<强> CSS

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

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

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

9 个答案:

SIMPLE＆amp;最好的 - TRY DEMO