cross-browser - html - Bootstrap textarea 幅 - チェックボックスとそのラベルをクロスブラウザで一貫して揃える方法

Bootstrap select 幅 / html / css / alignment / forms

これは、私を常に悩ませている小さなCSSの問題の1つです。 Stack Overflowの周りの人々は、 checkboxes とその labels 一貫してクロスブラウザにどのように垂直に配置しますか? Safariでそれらを正しく整列させると(通常は input vertical-align: baseline を使用)、FirefoxとIEでは完全にオフになります。 Firefoxで修正すると、SafariとIEは必然的に台無しになります。フォームをコーディングするたびに、これに時間を浪費します。

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

10 revs, 9 users 24%



Answer #1
.font2 {font-family:Arial; font-size:32px} / *サンプルフォント* /

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
} 
<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>
.font2, .font2 input {font-family:Arial; font-size:32px} / *サンプルフォント* /

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; / *これは、さまざまなフォントに適した値です。* /
}
<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>