Comment dépanner le remplissage qui ne s'applique pas aux listes de sélection Safari et IE ?

Remplissage non appliqué aux listes de sélection Safari et IE : guide de dépannage

Bien qu'il soit conforme à la spécification W3, le remplissage peut ne pas être rendu dans sélectionnez des listes sur les navigateurs Safari et IE. Cet écart est dû aux limitations des moteurs de rendu utilisés par ces navigateurs.

Comprendre le problème

Dans votre exemple de code :

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

Safari et IE ne parviennent pas à appliquer le remplissage gauche spécifié.

Solution : utiliser l'indentation du texte

Le remplissage n'étant pas pris en charge, une approche alternative consiste à utiliser l'indentation du texte. Cette propriété décale le texte dans la liste de sélection de la quantité spécifiée, créant l'illusion de remplissage.

Modification du code

Dans votre CSS, remplacez la propriété padding-left with text-indent :

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

Remarque : N'oubliez pas d'ajuster la largeur de la liste de sélection pour s'adapter à l'indentation du texte.

Considérations supplémentaires

• Assurez-vous que le type de document CSS sélectionné n'empêche pas l'application de remplissage.
• Vérifiez les feuilles de style spécifiques au navigateur susceptibles de remplacer votre CSS personnalisé.
• Utilisez les outils de développement du navigateur. pour inspecter le HTML et le CSS rendus afin d'identifier tout conflit potentiel.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!