【HTML/CSS】ボタンの枠が伸びてしまいます

質問

htmlでコーディングをしています。
ボタン作成の部分で、どうしても解決できないことがあり、
投稿させて頂きました。
大変お手数ですが、ご教授頂けたらと思います。

input typeが「submit」のボタンに、画像を重ねて、機能はそのままにうまく配置するところまで
できました。

ところが、Iceweaselというブラウザで見るとボタンの枠線は消えているのですが、
IE(バージョン11)で見ると、添付の画像のように、枠線が表示されてしまいます。

問題のボタンのhtml側とcss側の記載は以下の通りです。
※<br>のタグは見易くするため、以下では省略しています。

***************************************************

【html側】
<button input type="submit" value="検索"><img src="button_suche.gif" border="0"></button>
<button input type="submit" value="決定"><img src="button_bestimmen.gif" border="0" style="width: 75px; height: 30px; margin-right:200px"></button>
<button input type="button" value="全選択" onclick="chkAll_form(true)" /><img src="button_allegewaehlt.gif" border="0"></button>
<button input type="button" value="全解除" onclick="chkAll_form(false)" /><img src="button_ganzefreilassung.gif" border="0"></button>

【css側】
button{
/*width: 75px;*/
/*height: 30px;*/
width:auto;
padding:0;
margin:0;
background:none;
border:none;
font-size:0;
line-height:0;
overflow:visible;
cursor:pointer;
}

***************************************************

なお、Iceweasel側でも、枠線は消えているのですが、
クリックすると、iEで伸びている分(margin-right:200pxの分)も含めた
幅の点線が表示されます。

またIE側は、そういうコーディングはしていないのに、
ボタンのマウスを充てると、まわりの枠が水色に反転します。
※添付の図の「決定」ボタンの状態です。

どのようにすれば、IE側のこの枠は消えるのでしょうか。

回答No.1

ORUKA1951 · ベストアンサー

ユーザビリティのために、点線枠は表示されます。
どのブラウサでもそうなるはずです。
　これは、マウスではなく障害者がタブキーでフォーカスを移動した時にどこが現在地かを示す重要なインターフェースです。
★ですから、消すのは望ましくありません。健常者だけがサイトを利用するわけじゃない!!

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　それを消したければ
onfocus=”this.blur()"
　また、
botton{outline:none;}

　しかし、それは残しておくことを強くお勧めします。

お礼

ORUKA1951様

ご回答ありがとうございます。
すいません、ご指摘の通り、見た目のことばかり考えていて、
使う人のことまで考えが及んでいませんでした。
技術者としては、重要なことですよね。
ありがとうございます。

また、解決策についてもご教示頂き、ありがとうございました!
大変参考になりました。
今のままにしておきますが、こういうやり方もあるとうことで、勉強させて頂きます。