Safari および IE の選択リストにパディングが適用されない場合のトラブルシューティング方法

パディングが Safari および IE の選択リストに適用されない: トラブルシューティング ガイド

W3 仕様に準拠しているにもかかわらず、パディングが Safari および IE の選択リストに適用されない場合があります。 Safari および IE ブラウザでリストを選択します。この不一致は、これらのブラウザで使用されるレンダリング エンジンの制限により発生します。

問題を理解する

コード サンプル内:

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

Safari と IE は、指定された左パディングの適用に失敗します。

解決策: テキスト インデントを使用します

パディングはサポートされていないため、代替アプローチは text-indent を使用することです。このプロパティは、選択リスト内のテキストを指定された量だけシフトし、パディングのような錯覚を作成します。

コードの変更

CSS で、padding-left プロパティを置き換えます。 with text-indent:

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

注: テキストのインデントに合わせて選択リストの幅を調整することを忘れないでください。

その他の考慮事項

• 選択した CSS doctype がパディングの適用を妨げていないことを確認してください。
• カスタム CSS をオーバーライドしている可能性のあるブラウザ固有のスタイルシートがないか確認してください。
• ブラウザ開発者ツールを使用してくださいレンダリングされた HTML と CSS を検査して潜在的な競合を特定します。

以上がSafari および IE の選択リストにパディングが適用されない場合のトラブルシューティング方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。