ＩＥ６のカラム落ち対策

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

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

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

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

ブラウザ別シェア

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

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

ＩＥ８が増えてきているものの、ＩＥ６が３分の１くらいのシェアを占めています。

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

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

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

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

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

記述例

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