imgタグの属性値、解釈の違い…

仕事で取り組んでいるサイト作成のお仕事がまもなく終わります。現在は各ブラウザでの確認を行っております。手元にすぐ用意できるiPhone、iPadでまずは確認。一部明朝で表示したいところあるのだけれど、iOSのフォントの問題でそこはゴシック体のままでした（笑）。そんなお話。

フォントがないのだから、まぁこれは良しとして…。問題なのは今回の仕事がレイアウトがすでに決まっているものを再現したデザインであり、フォントの大きさも指定しているということ。iOSで使われているフォント（おそらくヒラギノ）の文字間隔などの影響か、レイアウトが崩れている部分があります。ここは改行を入れたり、文字を増減して微調整しました。

次はWindows XP以降でチェックしたいなぁと思っていたら、ちょうど私物のネットブックを会社のサーバーに接続したいという人がおりまして。一時的にネットブックを預かりました。OSはXPでブラウザはIE8です。さっそくサイトの確認をさせてもらうと…一部の画像が表示されないトラブルが発生。

Firefox2とiOSのSafariでは問題がなかったのだけれど…調べてみたらimgタグの属性が原因でした。PHPでソースを書き出す際、画像サイズを登録指定ある場合はimagタグのwidth属性とheight属性に数値を書き込んでおりますが、一部の画像ではサイズを登録せずそのまま出力しているので属性値が「width=”” height=””」になっていたんです。

で、これまで試したブラウザ（Firefox2、iOSのSafari）では属性値が空の際には指定していないものとして処理していたのだろうけれど、IE8では属性値を0（ゼロ）として扱う仕様になっているのだと思います。

サイト作成の途中まではIE6でもチェックしていのただけれど、今回問題が起きたのはIE6では未チェックの部分でした。IE6で確認したら、IE8と同様に画像を表示しませんでした。

この件は当然、機知の問題なのだろうけど、今回についてはめんどうだったしすぐに解決したのでネットでは調べておりません。まぁ、普通は属性を記述しながら数値を書かないなんてことはないと思うので、こんなおかしな失敗をすることはないですよね、きっと（笑）。