ホーム社長ブログ>IE6のカラム落ち対策

社長ブログ イメージ

IE6のカラム落ち対策

Webデザイナーを泣かせるブラウザの代表として、インターネットエクスプローラー6というブラウザがあります。

ファイアーフォックス、オペラ、クロムなどのブラウザでは全く問題なく表示されるのに、IE6だけはレイアウトがガタガタになるというのはよくある話です。

IE6を使うユーザーが少なければ捨てるという手段もありなわけですが、IE8がリリースされた今でも、IE6のシェアは大きいです。

下のグラフは、あるサイトのアクセス解析して得たブラウザ別のシェアです。

ブラウザ別シェア

ブラウザ別のシェア

ファイアーフォックスが増えてきているとはいえ、まだまだインターネットエクスプローラーのシェアが圧倒的です。

さらに、IEの中でのバージョンごとのシェアが以下の図です。

browser2.jpg

IE8が増えてきているものの、IE6が3分の1くらいのシェアを占めています。

つまり、ユーザーの利用しているブラウザの約3分の1はIE6ということです。これだけのシェアがある以上はIE6対策をしないわけにはいきません。

ということで、IE6対策の役立つテクニックを一つ紹介します。

IE6に関する問題でよくあるのが、いわゆるカラム落ちというものです。2カラムとか3カラムのレイアウトを使うときによく起きる問題ですが、これを簡単に防ぐ方法があります。

カラム落ちが発生しているであろうと思われる問題のあるブロックに対してスタイルシートで、overflow:hidden;を1行追加します。

難しい理屈は抜きにして、驚くほど簡単にカラム落ちを防ぐことができるテクニックの一つです。もちろん、カラム落ちには、いろいろな原因があるので、全てのケースでこれが妥当するわけではありませんが、カラム落ちで悩んでいる場合には一度試してみてください。

記述例

div#two_maincolumn {
float: left;
width: 520px;
padding-top: 15px;
padding-right: 0;
padding-bottom: 0;
margin-left: 15px;
display:inline;
overflow: hidden;
}

トラックバック(0)

トラックバックURL: http://www.sigmadesign.co.jp/ja/mt-tb.cgi/39

コメントする

月別アーカイブ

最近のコメント

ツイッター

フッター区切り線