Frage Warum macht der IE Passwortfelder kleiner als Textfelder?


Siehe das einfache Formular unten. Es ist nur ein Textfeld über einer Passwortbox. Wenn Sie es in Internet Explorer 7 (und 8 und wahrscheinlich anderen) betrachten, ist das Textfeld 10 Pixel breiter als die Kennwortbox.

<!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>   

Gibt es eine Möglichkeit, das global zu beheben, entweder durch CSS oder durch Hinzufügen von etwas zum HTML?


52
2018-03-27 15:11


Ursprung


Antworten:


Da in diesen Feldtypen unterschiedliche Schriftarten verwendet werden.

Der Fix ist einfach zu spezifizieren, dass alle Eingaben die gleiche Schriftart verwenden.

<style type="text/css">
  input {
      font-family: sans-serif;                
  }
</style>     

96
2018-03-27 15:13



Sie können eine feste Breite für alle Eingaben auf der aktuellen Seite anhängen:

<style type="text/css">
input {
    width: 10em;    
}
</style>

3
2018-03-27 15:15



Das Problem ist die Standardcodierung von Internet Explorer. Internet Explorer weist ein Problem auf, das die Feldlängen beim Verwenden der UTF-8-Codierung identisch anzeigt. Versuchen Sie im IE, die Codierung in "Windows" (Page-> Encoding in IE 8) zu ändern, während Sie eine Problemseite sehen, und Sie werden genau sehen, was ich meine.


3
2017-07-18 15:22



Wenn Sie die jQuery-Bibliothek in Ihre Seite (n) einschließen, können Sie den folgenden Code verwenden:

"Wenn das Dokument vollständig geladen ist, nehmen Sie das erste Eingabeelement mit type = 'text' und wenden Sie seine Höhe und Breite auf alle Eingabeelemente mit type = 'password'" an.

Ich habe dies nur auf IE7 getestet, und es funktionierte wie ein Zauber.

<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>  

Dies ist eine verallgemeinerte Antwort (indem das erste Element verwendet wird, das mit Eingabe [type = 'text'] übereinstimmt). Sie können einen Verweis auf ein bestimmtes Element erhalten, das Sie abgleichen möchten, und dann einen Verweis auf ein oder mehrere Kennwortfelder mit einem anderen jQuery-Selektor erhalten. Sehen Sie sich die Dokumentation zum Abrufen von Elementen nach ID oder einer Gruppe von Elementen mit einer gemeinsamen CSS-Klasse oder einem xpath-type-Ausdruck an:

http://docs.jquery.com/Selectors


1
2018-03-27 15:26



Wenn Sie die Breite für Textfelder festlegen, wird das Problem gelöst, aber ich nehme an, dass Sie das nicht möchten.

Versuchen Sie, die min-width bei Eingabe [type = text], Eingabe [type = password] auf etwas größer als die Standardeinstellung für Textfelder einzustellen. Du wirst wahrscheinlich brauchen http://deedwards.me.uk Das IE8-Skript, damit diese Selektoren funktionieren.


0
2018-03-27 15:15



Die Schriftgröße ist irrelevant. wie in diesem Test hier zu sehen: http://build.jhousemedia.com/ie_test.php

Ich wünschte, ich könnte Ihnen eine solide Antwort geben, warum, aber die Arbeit besteht darin, eine feste Breite darauf anzuwenden.


0
2018-03-27 15:21