背景画像をつけたフォームボタンがIE7で表示されない

2013/05/05

ウェブサイトを4月にリニューアルしてから、対応に一番時間を取られたのは「フォーム」周りでした。フォームで出力されたデータが文字化けしたり、「申込ボタン」に設定した背景画像が表示されなかったり・・・。

↓例えば、こんな感じ。

IE7で表示されないフォームの申込ボタン
実はいずれのエラーも「InternetExplorer7」で発生しました。

フォームボタンの背景を表示させるbackground-imageを設定

ウェブデザイン会社で働いているわけでも、ウェブに関する勉強をしてきたわけでもない。ウェブがちょっとだけ得意っという小市民ができるのは「まずググる」こと(笑)

「IE7 フォーム ボタン 背景」でググってみていくつか関連しそうなページの中から、解決作を探してトライ&エラー。なんと、今回は background-color: #ffffff; を追加しただけで解決しました(笑)

参考:IE7でボタンにCSSのbackground-imageを設定する | firegoby
※ display: block; と border-width: 0px; を追加しても解決できるみたいです。

参考:Internet Explorer でフォームボタンの背景画像が表示されない | システム開発のアイロベックス

InternetExplorerでの動作検証の重要性

フォームをチェックしていたACEスタッフ2人のメインブラウザはFirefoxChrome。最近は仕事でIEを使わない人も増えてますが、ウェブ管理者としては見落としてはならないIE。なんだかんだで、ACEのウェブサイト訪問者の約48%がIEというシェア率。(IE7ユーザーは全体の3%だったけど。。。)

このエラー解決のため、わざわざ「IETester」をダウンロードしたからには、今後は見逃さないように心がけます。

↓修正したページをIETesterで正常に表示されてることを確認(IE7で閲覧)↓
IETesterでサイトの表示状態をチェック

それにしても「IE7 エラー内容」でググるとかなり記事がヒットします。なにかと手のかかるIEのドジっ子っぷりが、逆にウェブ関係者たちを萌えさせるのかも!?