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

Question

I've come across a slight issue that appears to only occur in Chrome (tested and OK in IE10 and FF 31).

In the example provided there is #message and #link , both are set to display: inline-block; so that they can be vertically aligned to the middle of each other (the text in #message could vary in length greatly).

text-align: justify; has been set on #container to ensure that #message is aligned to the left and #link to the right.

The issue is that at certain window sizes a small "space" will appear to the right of #link .

The problem:

What it should look like:

What I am actually trying to achieve:

If you view the fiddle and can't see the problem try re-sizing the window.

1. What is causing this issue in Chrome?
2. Is there any way to fix this without resorting to using floats (I would like to keep vertical alignment)?

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

The overall issue is you are styling #container similar to how you should instead be styling #message. #Container should simply be an imaginary holder/container of #message, #link, #info.

Try getting rid of the #container background color red and instead add it to #message. After doing that you'll encounter a few padding issues with your link (I deleted the padding:1em). Next, you can adjust the width % of #message to get the spacing right. You'll notice that I deleted width:90% on your #container.

#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

It seems like the issue is caused by rounding off errors. The page seems to work ie there is no red gap on certain screen widths. You can test by re-sizing the window one pixel at a time. The appearance of red gap seems to be a function of container's width.

Here is my workaround:

jsFiddle Demo

It uses an extra div plus two vertical align techniques:

• The message is vertically aligned using mixed line-heights technique
• The button is vertically aligned using absolute positioning

The CSS (revised 8/26/2014):

#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

For my test, i have using :

• Position absolute to fix the vertical align of #link and i fix his size
• I modified the html struture
• I modified width to compare with your picture.

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 & BEST HACK - TRY DEMO

Note: margin = -0.5px and transform = 0.99px doesn't apply any extra margin or width to your div#container and that also doesn't force the a#link to move or push the Next Pixel.

Tested: Chrome 36 and 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

This case is a perfect candidate for using the flexbox layout. You can keep your existing code as is but add the following lines. This will keep your original code as a fallback for browsers which don't support flexbox. Since Chrome does support the current flexbox syntax all the way back to version 21 , this should safely eliminate your problem.

Codepen Demo

Modified CSS

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

#message {
  flex: 1;
}

You'll need to vendor prefix the code for comprehensive browser support, but since you're only worried about the bug in Chrome this is not strictly necessary (unprefixed support goes back to version 29, although version 27 still holds .54% of global market share, so you might throw -webkit- in to be on the safe side).

Since flexbox can be a little confusing to use at first, if you haven't used it before there is a good overview with examples at CSS-Tricks. I don't have enough reputation points to post more than two links but just Google "css tricks flexbox".

Hope this helps.

Answer 6

You can try the these tricks which may help you.

Using float : right to your #link also do the trick.

Answer 7

It's a bit of a hack but adding margin-right: -1px; seems to fix the issue for me:

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

Problem is this will push the box right by 1 pixel in all other browsers.

Edit: Setting overflow:hidden in the container div may resolve this, though.

Answer 8

I think that I just might have the solution to your problem. I've been fiddling around with display: inline-block quite alot myself and now and then encountered some margin issues in both the webkit browsers, in my case, mostly Safari though. However, what usually does the trick for me is simply to set the font-size of the parent div to 0, and then reset the font size of the child divs to their respective original font sizes, in pixels mind you.

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

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

Modified JS Fiddle:

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

Answer 9

giving margin-right to -2px will work check fiddle , I have tested by resizing as well.

CSS

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

Sometime we need to do weird things in order to make things work