カレンダー

09 | 2017/10 | 11
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:スポンサー広告


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。