IE共通の9つのCSSバグをそれぞれ解決する方法
2009年11月18日-
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で下線などをアニメーション表示するサンプル
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- 過去のエントリ