[FC2ブログ] InternetExplorer6での表示不具合を改善する

　このブログのIntenetExplorer6での表示に不具合がありましたが、6/29に改善しました。改善前に訪問してくれたIE6ユーザの方、ごめんなさい。m(_ _)m

この件について忘れないうちにまとめておきます。

InternetExplorer6での表示不具合改善

IE6での表示不具合

ある日、IE6でこのブログを見て表示に不具合があることを発見した。

１．上部の検索バーの上に隙間がある

　右図の通りです。
これはFC2ブログでディフォールトの検索バーの問題ですが、同じ状態になっているFC2のブログは実に多いです。皆さん気がついていないのでしょうか。

他にも私独自の改造部分で、他のブラウザでは起こらない問題が二つありました。

２．枠に入れた写真が枠からはみ出ている

　タグ<br　clear=”all” />を入れているのに、IE6では右図のように枠が縮んで写真が枠からはみ出す。

３．トップページの最下部に空白が見える

トップページの下、「新着順全記事（５記事／ページ）」の下（右図の最下部）に空白が見えます。
実はトップページはサイトリニューアル-インデックスページの追加で紹介しているように[プラグイン３]に[フリーページ]を置いて実現しているのですが、内容の記述と関係なく最下部に空白ができてしまいます。それでマイナスのマージンで消していたのですが、ie6では消せていなかったのです。

ie6は、今ではブラウザの問題児？

調べてみるとie6には沢山のバグがあり、今ではブラウザの問題児と言ったら言い過ぎでしょうか。 解説がわかりやすいHTMLクイックリファレンスから引用させてもらうと

…現在でもブラウザごとに表示のされ方が異なる場合があり、ブラウザ特有のバグなどもあるので注意は必要です。また、過去のバージョンのブラウザを使用しているユーザーは少なからず存在しているため、そうしたブラウザ向けに裏技的な手法でレイアウトの崩れなどが起きないように対策をする必要があるかもしれません。 特にInternet Explorer6は、2001年に公開された古いブラウザであるにもかかわらず、いまだに利用しているユーザーが無視できない比率で存在しています（2010年現在、日本では８％くらい？）。IE6は、その登場時にはCSS2のサポートが比較的進んだブラウザとして歓迎されたものですが、現在普及している他のブラウザと比較するとCSS2のサポートが中途半端でバグも多いため、ウェブ制作者としては早く淘汰されて欲しいブラウザのひとつです。

私はie6が入っていた古いPCで偶然表示の不具合を見つけましたが、いくつものブラウザで確認するのは大変です。各種ブラウザでどう見えるか表示してくれるサイト

Test your web design in different browsers

があります。海外サイトですので日本語の部分の細かいところはわかりませんが、レイアウトは確認できます。

表示不具合の修正

１．上部の検索バーの上に隙間があることの対策

検索バーはテンプレートで記述しているのではなく、FC2ブログの機能なのでユーザーには対策できない。 上部検索バーは必要性を感じず、ないほうが上部表示エリアが広くなって良いので削除することにしました。

FC2ブログの[環境設定]で消すことができる。

[ブログの管理]で
[環境設定の変更]-[ブログの設定]-[検索バーの設定]の画面を出し、[検索バーの利用]を[利用しない]に設定する。

サイト内記事の検索のために、代わりにサイドメニューに[記事検索]プラグインを追加します。サイト内検索しかできないが、web全体検索は別に手段があるのでこれで十分と判断した。

それにしても上部検索バーをディフォールトのままに放置し、ie6での見え方を気にしていないFC2ブログが多いこと。

２．枠に入れた写真が枠からはみ出ていることの対策

[clear　all]を入れているのに、枠が縮んで写真が枠からはみ出すが、<br　clear=”all” />の後に改行（または文字）を追加すると直る。 ただし改行を入れるとその分だけ（全ブラウザ共通で）写真の下に空白ができ、やや格好が悪い。

対策として改行時のfontを小さくして空白の大きさ（改行幅）を小さく調整した。

３．トップページの下に空白が見えることの対策

ie6は　border、margin、padding関係のタグで、左右と上下を両方指定したときに不具合が出るようです。 今回トップページの下側マージンをマイナスにすることで空白を消していたのだが、ie6では消せていない。 横縦ともマージン設定していたので下マージンが無視されたらしい。

対策としては、左右と上下を同時に指定せず、別々のタグで指定することです。
例えば、大ブロックで下と左右マージンを設定しているなら、下マージンの指定を削除し、大ブロック終了直前に小ブロックを置き、その下マージンを設定する。

今回の表示不具合で言えば、ページ全体で下マージンに-18を指定していたのをやめ、最後の文章を<div> タグで囲み、その下マージンに-18を設定しました。
ついでにページ全体にわたって余白の左右上下のバランスを、この手法を使って調整しました。

これでie6にない機能は別にして、その他のブラウザでの見え方とほぼ同じにできました。