前の記事 ≪:2009年11月17日 管理人のブックマーク
次の記事 ≫:Excelっぽい機能も付いた検索&ソート&ページング機能付きテーブル実...

IE共通の9つのCSSバグをそれぞれ解決する方法

2009年11月18日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法

IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。
どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。

1. センタリングが効かない問題
margin: auto を指定した場合の期待する結果

IEの場合以下のようになりますが↑にするための解決法が書かれています


2. 横に並べたいリストが階段状になってしまう

IEの場合以下のようになってしまいますがこの解決法も記載されています



3. ダブルマージンフロートバグ

マージンの指定が期待通りに出ている例


↓ IEの場合、margin: 30px 0 0 30px;  で定義した値が正しく適用されない例も解決法があります

4. heightの高さ指定が効かないバグ
height:2px を指定した場合の想定する表示


IEはなぜか2pxにならないのでこれも解決法が示されてます

5. overflow:autoのバグ
overflow:auto によって要素ごとスクロール内に入れている例

要素がはみ出してしまっているIEの例。


6. ボックス要素のサイズにパディングが付与される問題
width, height 指定したはずなんだけどなんでかサイズが膨らんでしまっていてよく見るとpaddingの分まで増えてしまっているというバグに対処する方法


7. min-heightの指定方法
普通は使えないmin-heightをIEでもハックを使うことで指定できる方法が紹介されています

8. フロートレイアウトのバグ

期待するレイアウト


が、IEでは以下のようになってしまうので、それを防ぐための記述法が紹介されています


9. リスト要素間のスペースが出来てしまう問題
期待するリスト要素の表示方法


リストを定義して、背景を指定しただけなのに大きなスペースが要素間に出来てしまっているのをいかに解決するかという方法が紹介されています


具体的なコードなどは以下のエントリを参照してください。
9 Most Common IE Bugs and How to Fix Them - Nettuts

関連の記事検索:CSS, IE, Web制作, Webデザイン, CSSハック, チュートリアル
スポンサード リンク

By.KJ : 2009年11月18日 09:03 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)