Following yesterday's issue ( DOM Equidistant divs with inline-blocks and text justify won't work when inserting through JS ) which @Snuffleupagus was kind enough to help me understand, I stumbled into another weird browser behaviour.
Updated fiddle in here: http://jsfiddle.net/xmajox/NUJnZ/
When any kind of content is added (block or inline) to the divs they shift down. When all divs have content, they magically move back into their correct places.
I tried starting them all with some dummy content div and then just changing that children's text but it reacts the same way.
Any ideas?
Add vertical-align: top
to these div's:
.rowSample > div {
background: none repeat scroll 0 0 black;
border: 1px solid yellow;
color: white;
display: inline-block;
height: 50px;
vertical-align: top;
width: 50px;
}
Because these are elements with display:inline-block
they are aligned as inline elements but have explicit dimensions. For example, <img>
tags by default have inline-block
display mode, so to align them inside text you have to specify a desired vertical-align
property.
Please take a look at the example fiddle: http://jsfiddle.net/a6Hu2/
I agree with @Keaukraine, you need to add a
vertical-align:top;
However, you are also going to need some specific code to get this working on Internet Explorer 7 (which in 2012 is still a major browser).
/* For IE 7 */
zoom: 1;
*display: inline;
See this article for details: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
来源:https://stackoverflow.com/questions/12834369/div-position-shifts-when-adding-content