カレンダー

11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

広告



最近の記事

カテゴリー

DATE: CATEGORY:DEV


簡単に横一列に並べられるので、
inline-blockはとっても便利。

このブログだと記事下部のこれに使ってます。
socialbkmkimg.png

ですが、IEだとうまく動かないみたいです。
(というか、動いてなかったみたい。)

というわけで回避方法だけメモ。

IEのバグのため色々考えないといけないのも
切ない話ですが。

(例)修正前。
ul {
margin: 0;
padding: 20px 0;
text-align: center;
}
li {
display: inline-block;
margin: 0;
padding: 5px 10px;
border: 1px solid #cccccc;
list-style-tyle: none;
}

(例)修正後。
ul {
margin: 0;
padding: 20px 0;
text-align: center;
}
li {
display: inline-block;
*display: inline;
*zoom: 1;
margin: 0;
padding: 5px 10px;
border: 1px solid #cccccc;
list-style-tyle: none;
}

今回はアスタリスクハックを使ってますが、
要は、IEならinline指定して、hasLayoutをtrueにする指定
(ここでは、zoom:1)をすれば良いらしい。

参考


アスタリスクハック
IEでもdisplay: inline-blockを使う一番簡単な方法

タグ : DEV CSS inline-block

Comment

コメントの投稿

管理者にだけ表示を許可する


トラックバック


この記事にトラックバックする



copyright © なんとなしの日記 all rights reserved.
内職☆在宅ワークの最強は?アフィリエイト!. 初心者だってカッコ良いホームページ作るぅ!
Powered by FC2ブログ
Related Posts Plugin for WordPress, Blogger...