デザイナーなので、普段はMacintoshを使っています。
このブログのデザイン変更も当然Macで制作しました。
今日、休みだったから自宅のTV録画＆エンコ用の自作PCで確認してみたら、エラい事になってました(・・;)
問題はIE6で発生しました。
トップやカテゴリのページは問題ないんだが、肝心の個別記事のページのレイアウトが崩れている(ToT)
IE6でご覧になってた方、ごめんなさい<(_ _)>
Winでの動作確認も当然するんですが、EeePCでは確認して問題なかったので、Winでも大丈夫だろうと思ってたんですが…
EeePCに入ってるブラウザは、IE7の他にFirefoxとGoogle Chromeのポータブル版。
あと、MacBookのFirefoxとSafariでも確認してたんですが、全て予定通りの表示をしてました。
もともと、IE6は独自ルール満載で要注意なブラウザ。
でも、まだまだIEのシェアの半分くらい占めているから見逃せないのも事実。
CSSは、それを想定してmarginの指定とか気をつけて作業したはずなのに…
とりあえず、全てのCSSを見直し。
表記の方法を直したり、Divを追加してスタイルを分けて指定してみたが、変化なし。
FirefoxならFireBugを使えば、ブラウザ上でスタイルを外したり、数値を変えたり…と便利なんだがIEでは使えないし(x_x;)
ソースを確認すると、コメントあたりまででソースが途切れているような状態。
コメントが怪しいから、MTの設定でコメント出来ないようにして再構築してみると、無事表示できた。
画像認証のCAPTCHAの設定で手間取ったから、そこかも？っと思って認証なしで設定してみても表示が崩れる。
で、色々調べたらブックマークレットで、FireBugの機能が使えるものを発見！
早速、使ってみたらコメントの送信ボタンあたりから、読み込みがちゃんと出来てなかったらしい。
もしかして、送信ボタンを画像にしたのが問題か？ってことで、試しに元々の送信ボタンに戻してみたら、無事に表示した。
しかし、他のブラウザは問題なく表示できてるし、画像ボタンの方が押しやすいし…
何か解決策が無いかと検索してみると、Formの画像ボタンには、一般的に３種類の方法があるみたい。
CSSでデザインしたかったのと、Valueが空なのがいまいち気に入らなかったので、buttomタグを使用していたんですが、これがだめだったみたい。
というか、もともとこのタグはIE6どころか7でもうまく動作しないらしい。
てなわけで、泣く泣くvalueを空にして、表示されてた元々のソースのままCSSで背景に画像を指定したら問題解決しました。
こんなことで１日使ってしまったよ(・・;)
頼むからIE6を使っているユーザはバージョン上げるか、他のブラウザ使ってください(^人^)
