IE8のlabelがおかしい

2009/05/13 13:58

最近IE8をインストールしたんですが、ブラウザ確認をしていて気づいた事がありました。
結構重要です。

「<label></label>」がブロック要素？として認識されている。
なので、IE7以降やFireFoxなどのモダンブラウザでは意図したレイアウトになっているんですが、IE8ではブロック要素？になっているため次の要素が下に落ちちゃってます。

bag01
こんな感じに。

回避するには？

以下のソースコードをIE8用に用意する。

CSSソース

label {
	display:inline-block;
}

これで回避できます。
ちゃんとした対応策ではないかもしれないのでもう少し調べてからわかり次第更新したいと思ってます。

bag02
これで一応バグ表示は回避できますね。

IE8だけにこのスタイルシートを当ててあげないといけないので条件分岐コメントを使って適用させます。
「<head></head>」内に記述します。

<!--[if IE 8.0]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
< ![endif]-->

ファイル名は任意でけっこうです。
気をつけなければならないのが、メインとなるCSSの下に記述しないといけないので注意してください。

とりあえず、これで回避は出来ますがコレで正しいのかどうかわからないので難しいところです・・・。
いきなり表示に食い違いが出るとは思っていなかったので先が思いやられます。

今後はIE6、IE7、IE8を確認しないといけないんですね。
仕事が増えた！

コメントをどうぞ♥

Track Back URL

DN*BLOG