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

Pocket

ウェブサイトを4月にリニューアルしてから、
対応に一番時間を取られたのは「フォーム」周り。
フォームで出力されたデータが文字化けしたり、
「申込ボタン」に設定した背景画像が表示されなかったり・・・。↓こんな感じ
IE7で表示されないフォームの申込ボタン
実はいずれのエラーも「InternetExplorer7」で発生(笑) なんだかな~

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

ウェブデザイン会社で働いているわけでも、ウェブに関する勉強をしてきたわけでもない。
ウェブがちょっとだけ得意っという小市民ができるのは「まずググる」こと(笑)
「IE7 フォーム ボタン 背景」でググってみて
いくつか関連しそうなページの中から、解決作を探してトライ&エラー。
なんと、今回は background-color: #ffffff; を追加しただけで解決(笑)
参考:IE7でボタンにCSSのbackground-imageを設定する | firegoby
※ display: block; と border-width: 0px; を追加しても解決できるみたいです。
参考:Internet Explorer でフォームボタンの背景画像が表示されない | システム開発のアイロベックス

IEでの動作検証の重要性

フォームをチェックしていたACEスタッフ2人のメインブラウザはFirefoxChrome
最近は仕事でIEを使わない人も増えてますが、ウェブ管理者としては見落としてはならないIE。
なんだかんだで、ACEのウェブサイト訪問者の約48%がIEというシェア率。
(IE7ユーザーは全体の3%だったけど。。。)
このエラー解決のため、わざわざ「IETester」をダウンロードしたからには、
今後は見逃さないように心がけます(´・ω・`)

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

それにしても、「IE7 エラー内容」でググると
かなり多くの記事で取り上げられてると感じる。
なにかと手のかかるIEのドジっ子っぷりが、
逆にウェブ関係者たちを萌えさせるのか!?

Pocket

 
About 召田 安宏 763 Articles
1984年生まれ。2008年より国際協力NGOの広報を担当しています。拓殖大学 国際開発学部を卒業後、一般企業を経て、NGOの世界に。世界の子どもを児童労働から守るNGO ACE(エース)を経て、2016年よりシャンティ国際ボランティアへ。広報・国内事業一筋。チョコっと世界をのぞいてみませんか?