如何在不同瀏覽器中實現一致的複選框和標籤對齊？

跨瀏覽器一致地對齊複選框和標籤

跨不同瀏覽器正確對齊複選框及其標籤可能是一項艱鉅的任務。為了實現跨瀏覽器的一致性，必須了解每個瀏覽器渲染引擎的細微差別。

在提供的標準 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中文網其他相關文章！