如何解決填入不適用於 Safari 和 IE 選擇清單的問題？

填充不適用於Safari 和IE 選擇清單：故障排除指南

儘管符合W3 規範，但填充可能無法在在Safari 和IE 瀏覽器上選擇清單。造成這種差異的原因是這些瀏覽器使用的渲染引擎的限制。

了解問題

在您的程式碼範例中：

<select style="padding-left:15px">
  <option>male</option>
  <option>female</option>
</select>

Safari 和 IE 無法套用指定的左側填滿。

解決方案：使用文字縮排

由於不支援填充，另一種方法是使用文字縮排。此屬性將選擇清單中的文字移動指定的量，從而產生填充的錯覺。

代碼修改

在CSS 中，替換padding-left 屬性帶有文本縮進：

#sexID {
  text-indent: 15px;
  width: 258px; // Adjusted for text-indent
}

注意：請記得調整選擇清單的寬度以適應文字縮排。

其他注意事項

• 確保所選的 CSS 文件類型不會阻止填充應用程式。
• 檢查是否有任何可能覆蓋您的自訂 CSS 的特定瀏覽器的樣式表。
• 使用瀏覽器開發人員工具檢查渲染的 HTML 和 CSS 以識別任何潛在的衝突。

以上是如何解決填入不適用於 Safari 和 IE 選擇清單的問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！