Pourquoi Chrome, Firefox et IE rendent tous les contrôles SELECT à largeur fixe différemment?

Je suis à perdre des cheveux sur celui-ci ... il semble que, lorsque je fixe la largeur d'un contrôle de sélection HTML il rend sa largeur différemment selon le navigateur.

Une idée de la manière de normaliser ce, sans avoir à se tourner vers de multiples feuilles de style?

Voici ce que je suis en train de travailler avec:

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

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

C'est mon type de document de la page:

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

source d'informationauteur mattruma

  1. 3

    Contrôles de formulaire sera toujours moins obéissant à style tentatives,en particulier sélectionne et fichier d'entrées, de sorte que le seul moyen fiable le style de la croix-navigateur et à l'épreuve de l'avenir à l'esprit, est de les remplacer par des Flash ou JavaScript et d'imiter leur fonctionnalité

  2. 4

    Essayez de définir font-size sur le sélectionne en tant que bien, qui peut affecter la manière dont ils sont rendus. Également envisager la min-width et max-width propriétés.

  3. 2

    input[type=text],
    sélectionnez {
    border: solid 1px #c2c1c1;
    width: 150px;
    padding: 2px;
    }

    //puis

    sélectionnez {
    largeur: 156px; //doit être input[type=text] largeur + (bordure et remplissage)
    }

    /*
    L'input[type=text] width = width + padding + border

    Sélectionnez la largeur juste égale à la largeur. Le rembourrage et la frontière se rendait à l'intérieur que la largeur de la contrainte. C'est juste la manière de SÉLECTIONNER les rouleaux...

    */

  4. 1

    Assurez-vous de supprimer toutes les marges par défaut et le rembourrage, et de le définir explicitement. Assurez-vous que vous utilisez un bon DOCTYPE et par conséquent le rendu de IE en Mode standard.

  5. 1

    Vous pouvez utiliser les faux widget déroulant et remplacer la sélection.

  6. 1

    Navigateurs ont tendance à limiter le montant que vous pouvez le style de contrôles de formulaire avec les CSS, parce que les contrôles de formulaire ont beaucoup de compliqué, un style qui varie entre systèmes d'exploitation. CSS ne peut pas décrire entièrement, afin que les navigateurs en mettre un peu hors des limites.

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

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

    Le meilleur que vous pouvez faire est de l'accepter, vous n'avez pas le contrôle complet sur l'aspect des champs de formulaire, et d'expérimenter avec ce style qui est vraiment important.

  7. 0

    Essayez d'utiliser Firebug ou de google Chrome "Inspecter l'Élément" (clic droit sur le contrôle de sélection, cliquez sur "inspecter l'élément") pour voir exactement ce que les propriétés de style sont hérités/rendu pour cet objet spécifique. Qui devrait vous conduire dans la bonne direction.

  8. 0

    J'ai essayé toutes ces suggestions ... et j'ai enfin de sorte qu'il semble bon dans IE et Firefox. Regarde comme il ya quelque chose de mal avec le rembourrage sur le contrôle de sélection. Si j'augmente la largeur de la sélection de 2 pixels de la désormais correctement la taille. 

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

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

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

  9. 0

    Martinator est correct.

    Semble que vous essayez de contrôler la largeur de différents types d'intrants ou de menus à travers bowsers. Vous pouvez sélectionner directement l'objet et indiquez la largeur. Par exemple:

    select {
  width:350px;
}

    Ou vous pouvez faire cela avec une zone de texte:

    select {
  width:350px;
}

    D'autres types d'entrées exiger la syntaxe Martinator mentionne. Ainsi, pour un texte, l'entrée ou le même type de fichier d'entrée, vous devrez faire cela pour chacun d'eux:

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

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

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