Définir la hauteur d'un < sélectionnez > dans Firefox 2

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

Question

J'ai un problème étrange avec la hauteur de la boîte de sélection HTML dans Firefox 2, en voici le code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>FIREFOX 2 SELECT BOX HEIGHT ISSUE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
      body    { margin: 0; padding:0 ;}
   div     { height: 20px; background:red; float: left; overflow: hidden; }
   select  { height: 20px; width: 100px; }
    </style>
  </head>

  <body>
    <div>Should be same height as </div>
    <select><option>this</option></select>
  </body>
</html>

La hauteur est supérieure de 2 pixels - le remplissage, la taille de la police et la hauteur de ligne ne semblent pas avoir d’effet, et j’ai manqué d’idées et d’endroits où regarder. Devrais-je supposer que la hauteur réelle de la boîte de sélection dans FF2 est toujours hauteur css + 2? Puis-je le réparer ou le contourner?

Était-ce utile?

La solution

Bienvenue dans le monde merveilleux des styles de contrôle de formulaire.

Sans vouloir paraître défaitiste, je pense que vous devriez simplement abandonner. Peu importe la façon dont vous modifiez les contrôles de formulaire, il y aura toujours des navigateurs ignorant totalement vos styles. Je crois que Safari ignore la plupart des CSS. Voir ' le style des éléments de sélection ' au 456 Berea Street pour des exemples.

Il existe des alternatives utilisant Javascript - je crois que l'interface utilisateur de jQuery contient des widgets similaires à l'élément select. Vous pouvez également utiliser ce menu contextuel jQuery et joindre une fonction qui définit la valeur de un champ de saisie caché. Je l'ai déjà fait et ça marche bien. Ce genre de choses est le seul moyen d'obtenir un contrôle total sur la taille et l'apparence.

Autres conseils

Il se peut que certains paramètres par défaut du navigateur soient en cours de lecture. que se passe-t-il si vous utilisez un réinitialiser le code CSS , puis l'appliquer tes styles? Est-il toujours 2px éteint?

Abandonnez l’utilisation de CSS pour l’appeler. Embrace jquery / javascript.

Vous souhaitez créer vos propres images et utiliser l'événement de clic de ces images pour basculer les entrées de formulaire réelles. Ces entrées de formulaire doivent être dans un affichage de style conteneur: aucune. De cette façon, vous pouvez le concevoir comme vous le souhaitez.

Voici un bon article sur le sujet: http: //www.noupe. com / css / form-elements-40-cssjs-styling-and-functional-techniques.html

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top