Safari および IE の選択リストのパディングの問題: 解決方法

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 のパディングが選択ボックス スタイルから削除されました。代わりに、テキストのインデントに合わせて幅が 15 ピクセル増加し、異なるブラウザ間で視覚効果の一貫性が保たれます。

以上がSafari および IE の選択リストのパディングの問題: 解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。