首頁  >  文章  >  web前端  >  Safari 和 IE 中的選擇清單填入問題:如何解決?

Safari 和 IE 中的選擇清單填入問題:如何解決?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-10-24 08:47:02808瀏覽

Select List Padding Issues in Safari and IE: How to Resolve?

Safari 和IE 中的選擇清單填充問題

許多開發人員在使用此類瀏覽器時遇到了選擇清單中的填充無法如預期工作的困難如Safari 和Internet Explorer。雖然 W3 規範中沒有明確說明此問題的原因,但這是支援 Safari 和 Chrome 的 WebKit 瀏覽器的已知限制。

解決方案:

儘管缺乏對填充的支持,但您可以透過使用文字縮進來實現類似的效果。此方法涉及刪除應用於選擇框的任何填充並為其寬度添加等量的填充。此外,將 text-indent 屬性設定為相同的值。

範例:

考慮以下程式碼:

<code class="html"><select id="sexID" name="user[sex]"
        style="border:1px solid #C1272D;
               width:258px; // 243 + 15px
               text-indent:15px;
               height:25px;
               color:#808080;"
></code>

在此範例中,原來的15px的padding已經從選擇框樣式中去掉了。相反,寬度增加了 15px 以適應文字縮進,確保視覺效果在不同瀏覽器中保持一致。

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn