IE9でinput type="image"のフォームボタン画像が表示されない時の対処法

フォームのボタンを画像で表示したいときに

<input type="image" src="画像パス" alt="代替テキスト" />

で画像を表示させる方法があります。

が、IE9だけ表示されません。。。

ボタンをcssのbackground表示で解決できるかもしれませんが、大量にボタンがある場合はひとつずつcss書いていくのがさすがに面倒。

htmlのソースも書き換えないといけないし。

しかし、解決方法は簡単です。

「width」「height」を指定する。

これだけ。

書いてみるとこんな感じです。

<input type="image" src="画像パス" alt="代替テキスト" width="100" height="100" />

原因は？

このwidthとheight、input type="image"の属性で「HTML5から追加」となっています。

おそらくHTML5対応に意気込んだIE9の取り残しバグかと思われます。

この形式の画像表示、IE8・IE10ではちゃんと表示されます。IE9は結構いい子になったと思っていたんですが、思わぬとこに落とし穴が…。

やですねぇ、IE。

ブラウザはChrome使いましょう。シンプルで快適。

↓↓ダウンロードはこちらから↓↓！！（布教）