Taille de la zone de texte est différente dans IE 6 et FireFox 3.6

Question

Je suis confronté à des problèmes avec la taille de la zone de texte lors de veiwing dans Fire Fox 3.6. < classe d'entrée = "dat" name type = "text" = dimension "rejection_reason" = "51" maxlength = "70" onchange = "on_change();"> le style

est aussi: .dat { font famille: verdana, arial, helvetica; police-taille: 8pt; police-poids: gras; text-align: à gauche; alignement vertical: milieu; Couleur de fond: Blanc; }

La taille de la zone de texte dans Fire Fox est légèrement inférieure à IE6.

Vous ne savez pas pourquoi IE6 et FireFox affichent une zone de texte de taille diff.

Answer 1

Essayez de spécifier la largeur de votre CSS. Si cela reste brisé, vous pouvez ajouter un astérisque à l'avant du mot de largeur comme une deuxième entrée et il s'appliquera uniquement dans IE6.

.dat 
{ 
    width: 100px; 
    *width: 105px; -- or whatever makes it look correct 
} 

EDIT: Merci pour la mise à jour sur le caractère spécial.

Answer 2

Problème normal lors du développement pour différents moteurs de navigateur Web. Notez que vous devriez peut-être développer pour FireFox 3.6 plutôt que IE6, car IE6 a mis à "vieux navigateur" que Microsoft ne supporte plus. Changez votre code pour bien fonctionner dans FireFox, IE, Chrome, Opera. chercher plus d'informations à: https://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site

Answer 3

Vous n'avez pas spécifié sa largeur juste que vous voulez qu'il prenne 51 charecters via l'attribut size. Je suggère de supprimer l'attribut Size = "51" et d'ajouter un style de largeur: 666px;

EDIT: après votre commentaire Tout d'abord parce que vous pouvez ne signifie pas que vous devriez. La manière corrète de résoudre cela est de changer < < input type = "text" > pour utiliser une classe css ou une largeur css pour définir leur largeur.

Cependant, le jQuery suivant ajoutera un style de largeur à chaque type d'entrée = texte qui a un attribut de taille

jQuery(       // on Document load 
    function($){     // run this function 
    $('input[type=text][size]') // find all input type=text with a size attr 
      .each(     // for each element found 
     function(index, Element){ // run this function 
      var size = $(this).attr('size'); // get size attrubte value 
      $(this).width((size * 0.6)+"em"); // set the css width property to 
     });         // a nasty huristic 
    } 
); 

Or, puisque ces entrées d'effets uniquement avec la taille spécifiée, que vous touchez chaque page que vous pouvez supprimer le taille attr et le remplacer par la taille Css, donc eventuly vous n'aurez pas besoin de ce script.

Answer 4

L'attribut @size donne une taille en caractères. Cependant, à moins que vous n'utilisiez des polices à espacement fixe, la taille d'un caractère lui-même n'est pas bien définie. De plus, différents moteurs de rendu peuvent utiliser des règles différentes pour l'espacement des caractères et/ou le crénage. Donc, à la fin, l'attribut n'est plus qu'un vague indice pour le navigateur.

Avez-vous essayé quelque chose comme style = "width:51em;" à la place? Je ne l'ai pas testé, mais la propriété width est bien supportée, donc j'espère que cela fonctionnera. Vous pouvez également utiliser des unités absolues (pixels) si vous voulez une taille plus précise.

Espérons que cela aide.

Answer 5

Avec une explication plus complète, que je devais donner à un manager;

IE6 a été construit autour de 2000, et ignoré plusieurs normes Web importantes à la fois. IE6 était en quelque sorte une «leçon apprise»; IE7 est mieux sur le respect de ces normes, et IE8 est encore mieux. Firefox a été construit autour de Netscape/Mozilla, et surtout, ils ont suivi la norme publique autant qu'ils le pouvaient. Firefox se comporte en grande partie comme Safari, Chrome, Opera et les tonnes de petits navigateurs sur le marché. Donc, pourquoi soutenir la norme, au lieu de IE, qui est le grand enfant sur le bloc? Presque tous nos clients utilisent IE!

Réponse: Comme IE se déplace lentement vers la norme, aussi. Si nous supportons Firefox, IE8 est facile, et nous avons probablement IE7 aussi bien avec presque aucun changement. IE6 est la mouche dans la pommade ici.

Si nous soutenons IE6 - la proposition originale - alors IE7 est un cas particulier, IE8 est un autre cas particulier, Firefox est un cas particulier, et ainsi de suite.

Si nous pouvons encourager les utilisateurs à s'éloigner d'IE6, c'est notre meilleur scénario. Je crois que Microsoft a officiellement mis fin à tout le soutien - y compris les correctifs de sécurité - pour IE6 lorsque Server 2003 SP1 a quitté le support, April 2009. Google a cessé de supporter IE6 entièrement, par exemple, en informant poliment les utilisateurs qu'ils doivent mettre à niveau "pour l'expérience complète du site". Des sites comme IE6NoMore offrent une fenêtre CSS assez lisse pour ceux qui exécutent IE6, en leur donnant quelques options de mise à niveau. En attendant, puisque les clients l'utilisent, IE6 est là pour rester, et il est plus facile - et le plus facile à maintenir - de se conformer aux normes, et de retourner à IE6 jusqu'à ce que cela soit fait.