Pourquoi est-ce que IE faire mot de passe des boîtes plus petites que les zones de texte?

Voir le formulaire ci-dessous. C'est juste une zone de texte en haut d'un mot de passe de la boîte. Si vous regardez attentivement dans Internet Explorer 7 (et 8, et probablement d'autres) la zone de texte est de 10 pixels plus large que la zone mot de passe. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>IE Text vs. Password test</title>
</head>
<body>                 

<form action="test"> 
  <p>
    <input type="text"><br>  
    <input type="password">      
  </p>
</form>          

</body>
</html>

Est-il un moyen de "réparer" que dans le monde, soit par le biais de CSS ou en ajoutant quelque chose à l'HTML?

  • Comme pour le pourquoi, je suppose qu'il a quelque chose à voir avec de "deviner" le nombre de caractères dans la boîte (la taille de l'attribut dit aussi, combien de caractères doivent correspondre). Et comme un astérisque ou une balle est plus petite qu'une minuscule m, par exemple ... vous obtenez différentes largeurs.
InformationsquelleAutor Patrick McElhaney | 2009-03-27
  1. 96

    Car de police différent est utilisé dans tous les types de champs.

    La solution est simplement de préciser que toutes les entrées d'utiliser la même police.

    <style type="text/css">
  input {
      font-family: sans-serif;                
  }
</style>
    InformationsquelleAutor Konstantin Tarkus
  2. 3

    Vous pourriez ajouter une largeur fixe pour toutes les entrées sur la page en cours:

    <style type="text/css">
input {
    width: 10em;    
}
</style>
    • Notez que cela permettra de définir la largeur de l'ensemble de vos éléments d'entrée, et pas seulement les zones de texte. Recommander la création d'une classe de "zone de texte" sur vos zones de texte, et puis d'avoir un style CSS pour l'entrée.zone de texte
    • E. Pourquoi définir une classe? input[type="text"],input[type="password"]
    • Parce que [l'attribut] sélecteurs ne fonctionnent pas sous IE.
    InformationsquelleAutor Darin Dimitrov
  3. 3

    Le problème est qu'Internet Explorer est le codage par défaut. Internet Explorer a un problème d'affichage de la longueur des champs de la même lors de l'utilisation de l'encodage UTF-8. Dans IE, essayez de changer l'encodage de "Windows" (Page->Encodage dans IE 8) pendant l'affichage d'une page de problème et vous verrez exactement ce que je veux dire.

    • Ne peut pas upvote cette réponse assez! Ne l'aurais jamais deviné que l'encodage serait la cause, mais cela a résolu mon problème parfaitement!
    InformationsquelleAutor
  4. 1

    Si vous incluez la bibliothèque jQuery dans votre page(s), vous pouvez utiliser le code suivant:

    "Lorsque le document est entièrement chargé, prendre le premier élément input de type='text', et de l'appliquer de la hauteur et la largeur de tous les éléments input de type='mot de passe'".

    J'ai testé cela sur IE7 seulement, et cela a fonctionné comme un charme.

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$("input[type='password']").height($("input[type='text']").height());
$("input[type='password']").width($("input[type='text']").width());

});
</script>

    C'est une réponse générale (en prenant le premier élément qui correspond input[type='text']). Vous pouvez obtenir une référence à un élément particulier que vous souhaitez faire correspondre, et ensuite obtenir une référence à une ou plusieurs boîtes de passe avec un autre sélecteur jQuery. Jetez un oeil à la documentation pour obtenir des éléments d'identification ou à un groupe d'éléments d'une même classe css ou xpath expression de type:

    http://docs.jquery.com/Selectors

    InformationsquelleAutor Rich
  5. 0

    Réglage de la largeur sur les zones de texte permettra de résoudre, mais je suppose que c'est pas ce que vous voulez.

    Essayer de régler le min-width sur input[type=text], input[type=password] pour quelque chose de plus grand que la valeur par défaut pour les zones de texte. Vous aurez probablement besoin http://deanedwards.me.uk 's IE8 script pour faire ces sélecteurs de travail.

    InformationsquelleAutor Macha
  6. 0

    La taille de la police n'est pas pertinent. comme on le voit dans ce test ici:
    http://build.jhousemedia.com/ie_test.php

    Je souhaite que je pourrais vous donner une réponse solide pour expliquer pourquoi, mais le travail est d'appliquer une largeur fixe pour elle.

    • Votre test montre que la taille de la police est le plus pertinent. Ne voyez-vous pas qu'il y a une diffence de taille entre les deux premiers champs et les deux champs qui ont une taille de police différente?
    InformationsquelleAutor jerebear