CSS: comment définir la largeur du contrôle de formulaire afin qu'ils aient tous la même largeur?

Prenons l'exemple suivant:CSS: comment définir la largeur du contrôle de formulaire afin qu'ils aient tous la même largeur?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      div { width: 15em } 
      input, textarea, select { width: 100%; 
       -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } 
     </style> 
    </head> 
    <body> 
     <form> 
      <div> 
       <input value="Input"> 
      </div> 
      <div> 
       <textarea>Text area</textarea> 
      </div> 
      <div> 
       <select> 
        <option>One</option> 
        <option>Two</option> 
        <option>Three</option> 
       </select> 
      </div> 
     </form> 
    </body> 
</html>

sur le navigateur qui prennent en charge la taille de la boîte border-box, cela est rendu comme je veux:

Correct rendering http://img.skitch.com/20100522-c75mhdut2q32yc7u5r2tkft1n4.png

Sur IE 6/7, cependant, cela est rendu comme:

IE 6/7 rendering http://img.skitch.com/20100522-f5pkgnwwceaak3t8fqq2w16gfm.png

Comment puis-je obtenir le même rendu dans IE 6/7 que je reçois dans d'autres navigateurs, sans avoir recours à la définition des tailles en pixels?

Source

2010-05-22 avernet

Si je suggère de renvoyer cette question à http://doctype.com/? –

Ceci n'est pas possible avec CSS. J'ai fait des recherches et j'ai découvert que la même question avait été posée avant le here. La solution est d'utiliser ce fichier boxsizing.htc et ajoutez la ligne suivante à votre tête HTML:

<!--[if lt IE 8]><style>input, textarea { behavior: url("boxsizing.htc"); }</style><![endif]-->

Source

2010-05-22 01:34:24 BalusC

Peut-être que cela pourrait vous aider: CSS3 support for Internet Explorer 6, 7, and 8. A partir de la page:

IE-CSS3 est un script pour fournir un soutien Internet Explorer pour plusieurs des nouveaux styles populaires disponibles dans la future norme CSS3.

Source

2010-05-22 00:36:58 eKek0

Malheureusement, ce 'htc' n'inclut pas le support de' box-sizing'. – BalusC

Une solution rapide pourrait être IE6/7 navigateur-hack avec quelque chose comme select { *width:102.5%; _width:102.5%; } si cela peut ne pas aligner sur le pixel si trop large.

Source

2010-05-22 00:57:32 mVChr

Le problème avec ceci, c'est qu'il vous verrouille à une taille de police donnée. Disons que j'ajoute un 'select {* width: 102.5%}'. Parfait, maintenant les champs de formulaire ont la même largeur: http://img.skitch.com/20100522-ght27dws54jqp8r79bf5nf1hus.png. Mais maintenant ajoutez un 'body {font-size: 200%}'. Avec le même 'select {* width: 102.5%}', vous obtenez: http://img.skitch.com/20100522-ksie3bm45e83g314869fdhby29.png. Donc, ce pourcentage que vous mettez dans 'select {* width: 102.5%}' dépend de la taille de la police. Au fur et à mesure que la taille de la police change, vous devrez modifier ce pourcentage. Plutôt que cela, je préférerais aller avec une largeur en pixels. – avernet

La solution est d'utiliser CSS et JavaScript pour remplacer contrôles de formulaire que les éditeurs de navigateurs ont comploté pour faire une douleur au style. Un select est juste un menu déroulant avec un événement onmouseup. Les éditeurs de texte pilotés par JS (riches et simples) qui peuvent remplacer une zone de texte abondent en ligne. Il y a même des bibliothèques juste à cet effet. (Example)

Source

2010-05-22 02:03:22 reisio

CSS: comment définir la largeur du contrôle de formulaire afin qu'ils aient tous la même largeur?

Répondre

Questions connexes