Verrouillage des éléments d'entrée sur Firefox

Question

J'essaie d'avoir un élément CSS verrouillé sur les deux côtés de son conteneur. Le CSS suivant fonctionne pour des éléments tels que div, mais pas pour les éléments d'entrée dans Firefox

left: 20px; droite: 20px; en haut: 20px; hauteur: 20px; largeur: auto; position: absolue;

J'ai trouvé que je peux envelopper l'élément dans un DIV, mais ce n'est pas vraiment une option car c'est très peu pratique dans ma situation.

Answer 1

Avez-vous essayé ce qui suit?

width: 100% 

Selon w3schools, il devrait s'étendre à l'élément contenant.

Answer 2

La raison width: auto ne fonctionne pas pour input s dans Mozilla est parce qu'ils ont une largeur intrinsèque qui est défini par l'attribut size, par défaut 20 lorsque l'attribut est pas déclaré.

Je ne vois pas un moyen facile de contourner cela. La manière habituelle compatible avec tous les navigateurs est l'enveloppe div avec une marge, puis la largeur du div est 100% à l'intérieur. Ceci est également nécessaire pour IE6, qui ne prend pas en charge le positionnement de bord absolu (réglage à gauche et à droite mais pas de largeur, ou haut et bas mais pas de hauteur) sur n'importe quel élément.