【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側のこの枠は消えるのでしょうか。
お礼
ありがとうございました。 ばっちりです。