うん、なんかごめんなさいねタイトルが大げさで。
でも私にとっては、Web屋にとっては非常に衝撃的だったの。小難しいハナシのところはぬっ飛ばしていただいて結構よ。

それは、前の記事でこの写真を撮ったときの話。何気なく見比べて…

「うん？ なんか印象が違うぞ。なんでだ？」

私としたことがビックリ。WindowsPCだと、文章中に挿入している写真に影が付いてねぇ！ こ、これ緑ブログも同じようにしてるんだ、けど…。いつから？ まさか初めからーっ。ぃえーっ。めっちゃホリデーっ。

※写真の影は、影用の画像を準備し、スタイルシートで表示させています。Windows＋InternetExplorer（7以外）でブラウズしている方のみに影響する不具合です。

DOCTYPEスイッチ de IEのバカバカ

いわゆる、IE6（以前）のバグですな。バグバグ。

おおざっぱな結論から申し上げますと、テンプレート1行目にあるXML宣言
<?xml version="1.0" encoding="utf-8"?>
が画像枠の表示に影響しています。（小粋空間: 標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する）

つまりどうなるかというと

IE6 の後方互換モード（および5.5以前）の場合、img 要素に padding プロパティが有効にならない

ババーン。
すっかり意識の外だったけど、そんな話もあったげな。

ムズカシイ話はすっ飛ばしていただいて構いませんが、要は影が付かないと言うことなんですよね。対処するためには、今と違う組み方をするのがひとつ。もうひとつは、文頭にあるXML宣言を取って標準互換モードにすること。すると晴れてpaddingも効くようになり、表示はされるのですが。

取り急ぎ、XHTMLとしてイイか悪いかは置いといても、まずは表示されなくちゃ話にならない。負けた気がしてキモチワルイですが、まあいいや、後で考えよう。サクっと削ってしまえアハハハハ。

アッチが立てばコッチが立たず

やれやれと思っていた矢先。…んん、ん？

お察しのいいかたならお分かりでしょうか。
標準互換モードにしたことにより、予期せぬ箇所にもpaddingが余計に効くようになってしまって、サイドバー部分が収まらずカラム落ちするようになっちゃったんです。ばかー。

ワケわかんないでしょー。
Web屋はこんなことばっかやってるんですよー。

いや、わかってるよ。確かにいい加減に組んでたし。
でもでもー。ばかー。

その他にも、ボロボロとありましたよ。
毎日考のサイドバーのある部分にだけ変な線が出てたとか。
最近、緑ブログで楽天のバナーが出てないなぁと思っていたら、IEでスクリプトエラーの警告が出ていたりとか。スクリプトエラーについてはもちろん、ほかのブラウザでも確認することはできますが、まあサボっていたというか…。どうやら前回更新した際、ちょっとヤってしまったみたいです。

正直、個人ブログはちょっと甘えているところもありまして、IEでの検証を怠っていたんですよね。そういやこのEeePCでブラウズするのも、Firefox一本でした。

こうなったら吠えてやるー！

いくら、普段からの私の口グセが

「Windows IEなんてこの世から消え去ればよいのにエコエコアザラクエコエコアザラク」

だったとしても、大多数の方が使うってのは好き嫌いにかかわらず無視できないです。無視しちゃマズいだろWeb屋として。

まあプリインストールされた状態で、入っているソフトでブラウズができるものを、わざわざ他のところからインストールして使う人のほうが少ないですよね。面倒ですよね。わかりますわかります。わか…

せめてWindowsとIEは切り離してくれー！
コンポーネント化をやめろー！ それができないなら、ちったぁマシなレンダリングしやがれコノヤロー！！！
エコエコアザラクエコエコアザラクー！

ゼェゼェハァハァ。

<< Macユーザ、EeePCでモバイる話 | main | 肉を炒めるのは好きですか？ >>