Pourquoi ce style "width: auto" fonctionne-t-il comme un style en ligne dans les deux navigateurs mais se casse lorsqu'il est déplacé vers une feuille de style externe uniquement dans IE?

Question

J'ai un élément INPUT qui est par défaut à "width: 100%". Cela l'amène à pousser d'autres éléments vers le bas sur la ligne suivante. Pour résoudre ce problème temporairement, j'ai ajouté un attribut de style en ligne sur l'élément comme ceci:

<input style="width: auto" ...> 

qui a très bien fonctionné. Maintenant, je vais revenir à nettoyer les correctifs temporaires et je déplace tous les styles hors des attributs de style dans les feuilles de style externes. Quand je déplace ce style "width: auto" dans la feuille de style, il semble toujours correct dans Firefox, mais dans IE, il l'ignore et renvoie par défaut "width: 100%" qui souffle à nouveau les éléments à côté de lui.

La barre d'outils du développeur Web IE ne me dit pas d'où viennent les styles, il est donc difficile de diagnostiquer ce qui se passe. Ma meilleure supposition est qu'il y a quelque chose d'autre qui prévaut dans IE, mais je ne sais pas ce que cela pourrait être.

Editer: Je jure que j'ai essayé de faire un clic droit dans la barre de développement IE mais je suppose pas - quand je fais "trace style" sur la "largeur: 100%" dans IE, j'obtiens un popup qui dit "1. Pas de correspondance ", mais dans Firefox il a montré que le 100% saignait à partir d'un sélecteur sur un élément ci-dessus qui était quelque chose comme" #outer foo bar INPUT "qui couvrait cette entrée aussi bien. J'ai supposé par erreur qu'un "#id" directement sur l'élément INPUT aurait une spécificité plus élevée que "#id foo bar INPUT" mais je suppose que les navigateurs sont en désaccord à ce sujet. De toute façon, cela a été à la racine de mon problème, alors merci pour les commentaires. Je souhaite qu'il y avait un moyen de promouvoir un commentaire à une réponse ...

Answer 1

Etes-vous absolument sûr que vos règles ne sont pas en conflit ou dans le mauvais ordre (et de la même priorité) annulant ainsi l'autre? Une chose que vous pouvez essayer en plus de la suggestion de John Sheehan est d'appliquer un ID à l'élément d'entrée, puis de créer une règle dans votre feuille de style qui ajoute de la largeur: auto à cet élément via le sélecteur d'ID.

Ainsi, la règle aura une priorité plus élevée et sera plus susceptible d'être appliquée. Cela vous donnera une meilleure idée de l'endroit où le problème est.

EDIT: En tenant compte de vos mises à jour, la règle qui causait votre chagrin fonctionne comme prévu (en ce qui concerne la spécificité). Si vous voulez traiter votre élément spécifique, vous pouvez toujours écrire une règle avec plus forte spécificité avec quelque chose comme ceci:

#outer foo bar INPUT#id { 
    width:auto; 
} 

Si vous vous retrouvez à écrire CSS comme ceci, cependant, les chances sont que vous avez fait quelque chose de mal et peut vouloir repenser la façon dont vous avez structuré vos règles CSS.