質問

これは、私が常に悩まされているCSSのマイナーな問題の一つです。

スタックオーバーフローでは、どのように checkboxes とその labels 一貫して クロスブラウザ ?

Safariで正しく整列させると、（通常は vertical-align: baseline の上に input )、FirefoxとIEでは完全にずれています。

Firefoxで修正すると、SafariとIEがどうしてもぐちゃぐちゃになる。フォームをコーディングするたびに、このために時間を浪費しています。

私が作業している標準的なコードはこちらです。

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

普段はEric Meyerのresetを使っているので、form要素は比較的きれいにオーバーライドされています。何かヒントやコツがあれば教えてください。

どのように解決するのですか？

警告! この回答は 古すぎる そして は機能しません をご利用ください。

<サブ 私はこの回答の投稿者ではありませんが、これを書いている時点では、肯定票・否定票ともに圧倒的にこの回答が多く（+1035 -17）、今も受け入れ回答としてマークされています（おそらく質問の元の投稿者がこの回答を書いているため）。

すでにコメントで何度も指摘されているように、この回答はもうほとんどのブラウザで動作しません（2013年以降も失敗しているようです）。

1時間以上、微調整、テスト、さまざまなスタイルのマークアップを試した結果、まともなソリューションができたかもしれないと思います。 この特定のプロジェクトの要件は次のとおりです。

1. 入力は独立した行でなければならない。
2. チェックボックスの入力は、すべてのブラウザでラベルテキストと同様に（同一でないにしても）垂直方向に整列する必要があります。
3. ラベルテキストが折り返される場合は、インデントされる必要があります（したがって、チェックボックスの下で折り返されることはありません）。

説明に入る前に、コードをお見せします。

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

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

での動作例です。 JSFiddle .

このコードは、Eric Meyerのようなフォーム入力のマージンやパディングを上書きしないリセットを使用していることを前提としています（そのため、マージンとパディングのリセットを入力CSSに記述しています）。 もちろん、実際の環境では、他の入力要素をサポートするためにネストやオーバーライドを行うことになるでしょうが、私は物事をシンプルに保ちたいと思いました。

注意すること

• は *overflow 宣言は、インライン IE ハック (the star-property hack) です。 IE 6と7はそれに気づくが、SafariとFirefoxはちゃんと無視する。有効なCSSかもしれないが、条件付きコメントを使った方がまだましだ。ただ、簡単のために使っただけだ。
• 私の知る限りでは、唯一の vertical-align の文は、ブラウザ間で一貫していました。 vertical-align: bottom . これを設定し、相対的に位置を上にすると、Safari、Firefox、IEでほぼ同じ動作となり、1～2ピクセルのずれが生じただけでした。
• アライメントを扱う上で大きな問題となるのは、IEが入力要素の周りに謎のスペースを大量に貼り付けることです。 これはパディングでもマージンでもなく、しかもやたらとしつこい。 チェックボックスに幅と高さを設定し、さらに overflow: hidden を使うと、なぜか余分なスペースがなくなり、IEのポジショニングがSafariやFirefoxと非常によく似た動作をするようになります。
• テキストのサイズによっては、相対的な位置、幅、高さなどを調整して、正しく表示する必要があります。

これが誰かの役に立つといいのですが 今朝作業していたプロジェクト以外ではこのテクニックを試していないので、もっと安定的に動作するものを見つけたら、ぜひ教えてください。

警告! この回答は 古すぎる そして うまくいかない をご利用ください。