5

@Snuffleupagus が親切にも理解を助けてくれた昨日の問題 (インライン ブロックを使用した DOM Equidistant divs with inline-blocks and text justify will not work when inserting through JS ) に続いて、私は別の奇妙なブラウザー動作に出くわしました。

ここで更新されたフィドル: http://jsfiddle.net/xmajox/NUJnZ/

任意の種類のコンテンツ (ブロックまたはインライン) が div に追加されると、それらはシフトダウンします。すべての div にコンテンツがあると、魔法のように正しい場所に戻ります。

私はそれらすべてをダミーのコンテンツ div で開始してから、その子のテキストを変更してみましたが、同じように反応します。

何か案は？

4

2 に答える 2

10

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/

于 2012-10-11T07:38:01.923 に答える
3

@Keaukraineに同意します。追加する必要があります

vertical-align:top;

ただし、これを Internet Explorer 7 (2012 年現在でも主要なブラウザー) で動作させるには、特定のコードも必要になります。

/* For IE 7 */
zoom: 1;
*display: inline;

詳細については、この記事を参照してください: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

于 2012-10-11T07:50:04.767 に答える