Pourquoi Chrome, Firefox et IE rendent-ils tous les commandes SELECT de largeur fixe différemment?

StackOverflow https://stackoverflow.com/questions/135076

  •  02-07-2019
  •  | 
  •  

Question

Je suis en train de perdre mes cheveux sur celui-ci ... il semble que lorsque je corrige la largeur d'un contrôle HTML SELECT, il affiche sa largeur différemment selon le navigateur.

Avez-vous une idée de la manière de normaliser cela sans avoir à recourir à plusieurs feuilles de style?

Voici ce avec quoi je travaille: 

.combo
{
    padding: 2px;
    width: 200px;
}

.text
{
    padding: 2px;
    width: 200px;
}

Voici mon type de document pour la page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Était-ce utile?

La solution

Les contrôles de formulaire seront toujours moins obéissants aux tentatives de style, en particulier aux sélections et aux entrées de fichier. Le seul moyen de les styler de manière fiable avec plusieurs navigateurs et en veillant à l'avenir, est de les remplacer par JavaScript ou Flash et d'imiter leur fonctionnalité

Autres conseils

Essayez de définir taille de police sur les éléments sélectionnés, ce qui peut affecter la manière dont ils sont rendus. Considérez également les propriétés min-width et max-width .

input [type = text], sélectionnez {      bordure: solide 1px # c2c1c1;      largeur: 150px;      rembourrage: 2px;      }

// alors

select {      largeur: 156px; // doit être saisi [type = texte] width + (border and padding)      }

/ * L'entrée [type = texte] width = width + padding + border

La largeur de sélection est égale à la largeur. Le remplissage et la bordure sont rendus dans cette contrainte de largeur. C'est comme ça que SELECT roule ...

* /

Assurez-vous de supprimer toutes les marges et tous les marges de remplissage par défaut et de les définir explicitement. Assurez-vous que vous utilisez un DOCTYPE approprié et que vous restituez ainsi IE en mode standard.

Vous pouvez utiliser un widget de menu déroulant factice et remplacer le SELECT.

Les navigateurs ont tendance à limiter le nombre de styles que vous pouvez styliser avec CSS, car les contrôles de formulaire ont beaucoup de styles complexes qui varient selon les systèmes d'exploitation. CSS ne peut pas décrire cela complètement, alors les navigateurs en mettent une partie hors de portée.

Eric Meyer a écrit un bon article sur le sujet:

http://meyerweb.com/eric/urtal/ 2007/05/15 / formal-weirdness /

Le mieux que vous puissiez faire est d’accepter de ne pas avoir le contrôle total de l’apparence des champs de formulaire et d’expérimenter le style qui est vraiment important.

Essayez d’utiliser Firebug ou celui de Chrome "Inspect Element". (cliquez avec le bouton droit sur le contrôle de sélection, cliquez sur "inspecter un élément") pour voir exactement quelles propriétés de style sont héritées / rendues pour cet objet spécifique. Cela devrait vous conduire dans la bonne direction.

J'ai essayé toutes ces suggestions ... et je l'ai enfin, donc ça a l'air bien dans IE et Firefox. On dirait qu'il y a quelque chose qui ne va pas avec le remplissage du contrôle SELECT. Si j'augmente la largeur du SELECT de 2 pixels, la taille actuelle convient correctement. 

 .combo
 {
     padding: 2px;
     width: 206px;
 }

.text
{
    padding: 2px;
    width: 200px;
}

Toutefois, Chrome ne leur affiche toujours pas la même taille.

Martinator est correct.

On dirait que vous essayez de contrôler la largeur de divers types d’entrées ou de menus sur différents serveurs. Vous pouvez directement sélectionner l'objet et spécifier la largeur. Par exemple: 

select {
  width:350px;
}

Ou vous pouvez le faire avec une zone de texte: 

select {
      width:350px;
}

D'autres types d'entrées nécessitent la syntaxe mentionnée par Martinator. Donc, pour un texte, une entrée ou même une entrée de type de fichier, vous devriez le faire pour chacun: 

input[type=text] {
      width:350px;
}

input[type=input] {
      width:350px;
}

input[type=file] {
      width:350px;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top