IE7以下でdisplay: inline-blickを使う

display: inline-block;は便利でよく使うのですが、IE7以下では効かない場合があります。
今回はdisplay: inline-block;をIE7以下でも使用できる方法を試してみます。

サンプルコード

対応前のサンプルです。

HTML

<div class="sample">サンプル</div>
<span class="sample">サンプル</span>

CSS

.sample {
	display: inline-block;
	padding: 10px;
	background: #ff0000;
}

IE7以下対応前のデモページ

IE7でも対応させる場合、ハックを使って対応できます。

CSS

.sample {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	padding: 10px;
	background: #ff0000;
}

IE7以下対応後のデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031