Dlaczego program IE powoduje, że pola hasła są mniejsze niż pola tekstowe?

Zobacz poniższy prosty formularz. To tylko pole tekstowe na górze pola hasła. Jeśli spojrzysz na to w Internet Explorer 7 (i 8, i prawdopodobnie innych), pole tekstowe jest o 10 pikseli szersze niż pole hasła.Dlaczego program IE powoduje, że pola hasła są mniejsze niż pola tekstowe?

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

Czy istnieje sposób na "naprawę" globalnie, poprzez CSS lub dodanie czegoś do HTML?

Źródło

2009-03-27 Patrick McElhaney

Co do tego, przypuszczam, że ma to coś wspólnego z "zgadywaniem", ile znaków może zmieścić się w pudełku (atrybut rozmiaru mówi również, ile znaków powinno pasować). A ponieważ gwiazdka lub kula jest mniejsza niż mała litera m, na przykład ... masz różne szerokości. – Joey

Ponieważ w tych typach pól używana jest inna czcionka.

Poprawka polega na określeniu, że wszystkie wejścia używają tej samej czcionki.

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

Źródło

2009-03-27 15:13:59

Ustawienie szerokości w polach tekstowych rozwiąże, ale zakładam, że nie jest to, co chcesz.

Spróbuj ustawić min-szerokość na wejściu [typ = tekst], wpisz [typ = hasło] na coś większego niż domyślne dla pól tekstowych. Prawdopodobnie będziesz potrzebował skryptu IE8 w wersji http://deanedwards.me.uk, aby te selektory działały.

Źródło

2009-03-27 15:15:06 Macha

Można dołączyć stałą szerokość dla wszystkich wejść na bieżącej stronie:

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

Źródło

2009-03-27 15:15:08

Należy pamiętać, że ustawi to szerokość dla wszystkich elementów wejściowych, a nie tylko pól tekstowych. Polecam ustawienie klasy "textbox" na twoich polach tekstowych, a następnie posiadanie stylu CSS dla input.textbox –

@Richard E. Po co ustawić klasę? input [type = "text"], input [type = "password"] – phihag

Ponieważ selektory [atrybut] nie działają w IE. – bobince

Rozmiar czcionki nie ma znaczenia. jak widać w tym teście tutaj: http://build.jhousemedia.com/ie_test.php

Chciałbym dać ci solidną odpowiedź, dlaczego, ale praca wokół polega na zastosowaniu do niej stałej szerokości.

Źródło

2009-03-27 15:21:41 jerebear

Twój test pokazuje, że rozmiar czcionki jest najbardziej odpowiedni. Czy nie widzisz różnic w rozmiarze między dwoma pierwszymi polami i dwoma następnymi, które mają inny rozmiar czcionki? – Guffa

Jeśli obejmują biblioteki jQuery na stronie (-ach), można użyć następującego kodu do:

„Gdy dokument jest w pełni załadowany, wziąć pierwszy element wejściowy type =«text», a zastosuj jego wysokość i szerokość do wszystkich elementów wejściowych za pomocą type = 'password' ".

Testowałem to tylko na IE7 i działało jak czar.

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

Jest to uogólniona odpowiedź (przyjmując pierwszy element, który odpowiada wprowadzeniu [type = 'text']). Możesz uzyskać odwołanie do konkretnego elementu, który chcesz dopasować, a następnie uzyskać odwołanie do jednego lub więcej pól hasła z innym selektorem jQuery. Przyjrzeć się dokumentacji dla uzyskania przez ID elementy lub grupy elementów za pomocą wspólnego wyrażenia klasy CSS lub XPath-Type:

http://docs.jquery.com/Selectors

Źródło

2009-03-27 15:26:46 Rich

Problemem jest domyślne kodowanie Internet Explorer. W programie Internet Explorer występuje problem z wyświetlaniem długości pól takich samych podczas kodowania UTF-8. W IE spróbuj zmienić kodowanie na "Windows" (Strona-> Kodowanie w IE 8) podczas przeglądania strony z problemami, a zobaczysz dokładnie co mam na myśli.

Źródło

2009-07-18 15:22:33

Nie udało się uzyskać wystarczającej odpowiedzi! Nigdy by się nie domyśliłem, że kodowanie będzie przyczyną, ale to rozwiązało mój problem. – thejonwithnoh

Dlaczego program IE powoduje, że pola hasła są mniejsze niż pola tekstowe?

Odpowiedz

Powiązane problemy