プロが教えるわが家の防犯対策術!

<BUTTON type="reset" style="border-style : none; background-color: #FFFFFF;">
<IMG src="image.gif" value="リセット"></BUTTON>
※リセットボタンを画像にして背景を白、ボーダをなしにして画像のみ表示したボタンにした。

上記に記述した内容でフォームのリセットボタンを作ったのですが
画像の周りに変な余白が出るのですがその余白を消す方法ってなにかありますか?
わかる方いましたら、教えてください。

A 回答 (1件)

その隙間はレンダリングにおいて完全にブラウザ依存なので、


全てのブラウザに対応して隙間を一切なくすということは不可能でしょう

IEやOpera等でしたら、

<BUTTON type="reset" style="border-style : none; background-color: #FFFFFF;width:50px;height:100px;"><IMG src="image.gif" alt="リセット" width="50" height="100"></BUTTON>

のようにbuttonタグのstyle設定で width(横幅) height(縦幅)を
内包している画像(image.gif)と同じ幅に設定してあげれば可能かと思います

上記例では、画像の横幅が 50px 縦幅が 100px と仮に設定したものです

それとvalue値の視覚的表示は無効になるブラウザがほとんどですので、
今回の場合マウスを載せた際や、画像非表示の際に文字を表示したいのならば
<img>タグ内にvalueではなく代替テキストの alt となります
(title="~"もあれば尚良し)

ちなみに本来 value="~" を記述するのは内包されているものではなく、<button>タグそのものにです


  <button type="button" name="hoge" value="foo">~</button>
    • good
    • 0
この回答へのお礼

ありがとうございます。無事に解決しましたー(*^ワ^*)

>value値の視覚的表示は無効になるブラウザがほとんど
altとtitleをつけるんですねー。
こちらのほうがイメージにカーソルを合わせるとテキストが付くので良いです。
色々とありがとうございます。また何かありましたらよろしくお願いします。

お礼日時:2007/03/01 16:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!