複数の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ベストアンサー
- 回答日時:
ブラウザ間の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を無効にしてるクライアントには効果なし。
やはりブラウザの設定に依存したくないので、
今回はあきらめます。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- PHP $_SESSIONについて教えて下さい。 2 2023/03/02 09:18
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクの色一括指定について。
-
cssでリンク先のurlを表示させ...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
入力規則のリストの文字の大き...
-
PDFファイルを開かずに印刷...
-
ユーザーフォーム スクロール...
-
cssファイルの名称付け
-
ペイント3Dのテキストサイズ変更
-
Excel VBAで文字列の可視長を得...
-
教えてください。
-
テーブル内の文字サイズを変更...
-
jspにcssを反映させるには
-
font-family の記載方法
-
WindowsとMacで違うCSSを読み込...
-
セレクトボックスの幅を指定し...
-
Illustratorで作成、pngで保存...
-
オプションメニューの中の文字...
-
ページ内にスクロールバーのあ...
-
printf("文字列\\n")が円マーク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページについて質問です...
-
cssでリンク先のurlを表示させ...
-
safari でcssがききません!
-
メールソフトBecky!のHTMLメー...
-
複数のcheckboxを間隔を空けず...
-
携帯では指定のタグを無効化す...
-
CSSシグネチャ
-
Chromeでcssを表示させると、cs...
-
スクロールバーをカスタマイズ...
-
cssの今、一番旬なブラウザごと...
-
googleカスタム検索の枠を消したい
-
bootstrapのどのcssドキュメン...
-
リンクの色一括指定について。
-
ホームページビルダーでcssのサ...
-
文字の色、大きさを変えるWe...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
入力規則のリストの文字の大き...
-
教えてください。
-
Illustratorで作成、pngで保存...
おすすめ情報