複数のcheckboxを間隔を空けず引っ付けて、横に並べたいのですが、

複数のcheckboxを間隔を空けず引っ付けて、横に並べたいのですが、
以下のように、styleの中で、左右のマージンで調整すると、
ブラウザ（ie、firefox、safariなど）によって見え方が異なってしまいます。
他によい方法はないでしょうか。
よろしくお願いします。


<input type="checkbox" name="a1" value="1" style="margin-left: -10; margin-right: 0">
<input type="checkbox" name="a2" value="2" style="margin-left: -10; margin-right: 0">
<input type="checkbox" name="a3" value="3" style="margin-left: -10; margin-right: 0">
　：

No.1 ベストアンサー 回答者： torayoshi 回答日時： 2010/06/23 17:10

ブラウザ間のcssレンダリングの違いは仕方ない事。

なので、対処療法的に簡易的な方法として、ブラウザ別にcssを読み込む手法があります。
JavaScript例文集サイトに「ブラウザ別にcssを読み込む」というサンプルがあったので
それの応用。
【js】
fName = "";
str = navigator.appName.toUpperCase();
if (str.indexOf("NETSCAPE") >= 0) fName = "ff.css";
if (str.indexOf("EXPLORER") >= 0) fName = "ie.css";
if (str.indexOf("SAFARI") >= 0) fName = "sfr.css";
document.write("<link rel='stylesheet' href='"+fName+"' type='text/css'>");
【html】
<input type="checkbox" name="a1" value="1">
<input type="checkbox" name="a2" value="2">
<input type="checkbox" name="a3" value="3">
【IE用css(ie.css)】
input{margin-left: -10; margin-right: 0}
【firefox用css(ff.css)】
input{margin-left: -4; margin-right: 0}
【safari用css(sfr.css)】
input{margin-left: -●; margin-right: ●}
※↑当方safari持っておらず未検証。
※当然JavaScriptを無効にしてるクライアントには効果なし。

この回答へのお礼

ご回答ありがとうございます。

>ブラウザ間のcssレンダリングの違いは仕方ない事。
やはり、ノーマルな方法では無理なのですね。
承知いたしました。
また、ご丁寧な「対処療法」をご提示いただき、
大変勉強になりました。

>当然JavaScriptを無効にしてるクライアントには効果なし。
やはりブラウザの設定に依存したくないので、
今回はあきらめます。
本当にありがとうございました。
　

お礼日時：2010/06/24 07:49