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

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

この質問は、さまざまなブラウザ、特に Safari、Firefox 間でチェックボックスとそのラベルを一貫して配置する際に直面する課題を浮き彫りにしています。 、IE。提供されているコードは、チェックボックスとそのラベルを含むフォームの標準 HTML と CSS を示しています。

かつて人気があったソリューションの 1 つは、Safari でチェックボックスを正しく配置するために、入力でvertical-align: Baseline を使用することでした。ただし、このアプローチでは、Firefox と IE で不整合が生じることがよくありました。

広範なテストと調整の後、次の 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 サイトの他の関連記事を参照してください。