CSSのお話し（レイアウト編）
こんにちは大阪のWEB屋 CUBESです。
先日「CSSのお話し（文字編）」でブラウザー・OSによって
行数やレイアウトのイメージが変わって見える記事を書きましたが、
今回はブラウザーによってはCSSを間違った解釈をするネタです。
ちょうど、アメブロカスタマイズしているので、
このBLOGをサンプルに説明させていただこうかと・・・。
まずは、この画像をご覧ください。
Internet Explorer 8で見た場合は、おねーちゃん画像の下にメニューが表示されますが、
Internet Explorer 6では、おねーちゃん画像の上にメニューバーがカブって表示されます。
これが、WEB屋泣かせのInternet Explorer 6バグです。
ホームページを作るときには電卓片手に、レイアウトを数値で計算して作っていくわけですが、Internet Explorer 6は独自の計算（バグ）で、こんなレイアウトになるわけです。
Internet Explorer 7でもレイアウトが崩れます。
最近では、Internet Explorer 8もWindows7の発売で32bit版・64bit版の2種類が存在し、64bit版では綺麗に表示されているのに、32bit版ではレイアウトが崩れているってことも有ります。
WindowsだけではなくMacで見たときにも崩れていることがあります。
対処方法としては、Internet Explorer 6用のCSSを別に作って、ホームページ閲覧者がInternet Explorer 6を使用している場合はInternet Explorer 6用CSSを使用するって作り方をするわけですが、コレが非常に面倒なのです。と言うのは、各ブラウザーごとのCSSを書いて、各ブラウザーで問題なく表示されるか検証するわけです。
僕の場合、お客さんのホームページ作成時に最低でも下記環境でレイアウトチェックをしています。
- Windows XP – Internet Explorer 6
- Windows XP – Internet Explorer 7
- Windows XP – Internet Explorer 8
- Windows XP – FireFox
- Windows 7（32bit） – Internet Explorer 8
- Windows 7（64bit） – Internet Explorer 8
- Windows 7 – FireFox
- Windows 7 – Safari
- Mac（OS-x） – Safari
- Mac（OS-x） – FireFox
この動作チェック・レイアウトチェックが時間がかかる作業なのですが、WEB屋として・PROとして、やはり手が抜けないです。（自社サイト・このブログは個人的なサイトなので、最低限のチェックしかしていません。理由は後日ってことで。）
ただ、ホームページ屋によっては、この動作チェック・レイアウトチェックが面倒で、しない会社も多いです。
ホームページをWEB屋に制作依頼された会社様・ショップ様は、一度ご自分のパソコン環境と違う環境でホームページをご確認されて方が良いですよ。
