異なるブラウザ間で一貫したチェックボックスとラベルの配置を実現するにはどうすればよいですか?

ブラウザ間でチェックボックスとラベルを一貫して配置する

さまざまなブラウザ間でチェックボックスとそのラベルを適切に配置するのは、困難な作業になる場合があります。ブラウザ間の一貫性を実現するには、各ブラウザのレンダリング エンジンの微妙な違いを理解することが不可欠です。

提供されている標準 HTML では、

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

通常、Eric Meyer のリセット スタイルシートが適用され、ブラウザ固有のオーバーライド。しかし、広く普及しているにもかかわらず、すべてのブラウザ間でチェックボックスとラベルを揃えるのは依然として課題です。

ブラウザ間調整ソリューション

広範な実験の結果、次の条件を満たすソリューションが登場しました。次の要件:

• チェックボックスとラベルは別々にあります
• 垂直方向の配置はブラウザ間で一貫しています。
• ラベル テキストはチェックボックスの下に延ばさずに折り返されます。

使用される CSS コードは次のとおりです:

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;
}

ラベルをブロックとして表示するように設定し、適切なパディングとテキスト インデントを適用することで、一貫したラベル付けが実現されます。次に、入力要素は垂直方向の配置と相対的な配置を使用してラベル内に配置され、すべての主要なブラウザーで確実に配置されます。

以上が異なるブラウザ間で一貫したチェックボックスとラベルの配置を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。