Tại sao IE tạo hộp mật khẩu nhỏ hơn hộp văn bản?

Xem biểu mẫu đơn giản bên dưới. Nó chỉ là một hộp văn bản trên đầu trang của một hộp mật khẩu. Nếu bạn nhìn vào nó trong Internet Explorer 7 (và 8, và có lẽ là những người khác), hộp văn bản rộng hơn 10 pixel so với hộp mật khẩu.Tại sao IE tạo hộp mật khẩu nhỏ hơn hộp văn bản?

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

Có cách nào để "khắc phục" toàn cầu, thông qua CSS hoặc bằng cách thêm nội dung nào đó vào HTML không?

Nguồn

2009-03-27 Patrick McElhaney

Đối với lý do tại sao, tôi đoán nó có một cái gì đó để làm với "đoán" có bao nhiêu ký tự có thể phù hợp với hộp (thuộc tính kích thước cũng cho biết, bao nhiêu ký tự phải phù hợp). Và như dấu hoa thị hoặc dấu đầu dòng nhỏ hơn chữ thường, ví dụ ... bạn có chiều rộng khác nhau. – Joey

Vì phông chữ khác nhau được sử dụng trong các loại trường đó.

Việc sửa chữa chỉ đơn giản là xác định rằng tất cả đầu vào đều sử dụng cùng một phông chữ.

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

Nguồn

2009-03-27 15:13:59

Đặt chiều rộng trên hộp văn bản sẽ giải quyết nhưng tôi cho rằng đó không phải là điều bạn muốn.

Thử đặt chiều rộng tối thiểu trên đầu vào [loại = văn bản], nhập [loại = mật khẩu] thành nội dung nào đó lớn hơn giá trị mặc định cho hộp văn bản. Có thể bạn sẽ cần tập lệnh IE8 của http://deanedwards.me.uk để làm cho các bộ chọn đó hoạt động.

Nguồn

2009-03-27 15:15:06 Macha

Bạn có thể thêm một chiều rộng cố định cho tất cả các đầu vào trên trang hiện tại:

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

Nguồn

2009-03-27 15:15:08

Lưu ý rằng điều này sẽ đặt chiều rộng cho tất cả các yếu tố đầu vào của bạn, không chỉ các hộp văn bản. Đề xuất đặt một lớp "hộp văn bản" trên hộp văn bản của bạn và sau đó có kiểu CSS cho input.textbox –

@Richard E. Tại sao đặt lớp học? input [type = "text"], input [type = "password"] – phihag

Vì bộ chọn [attribute] không hoạt động trong IE. – bobince

Kích thước phông chữ là không thích hợp. như đã thấy trong bài kiểm tra này tại đây: http://build.jhousemedia.com/ie_test.php

Tôi ước tôi có thể cung cấp cho bạn câu trả lời chắc chắn về lý do tại sao nhưng công việc xung quanh là áp dụng chiều rộng cố định cho nó.

Nguồn

2009-03-27 15:21:41 jerebear

Thử nghiệm của bạn cho thấy kích thước phông chữ phù hợp nhất. Bạn không thấy rằng có một sự khác biệt về kích thước giữa hai trường đầu tiên và hai trường tiếp theo có kích thước phông chữ khác nhau? – Guffa

Nếu bạn bao gồm các thư viện jQuery trong trang của bạn (s), bạn có thể sử dụng đoạn mã sau vào:

"Khi tài liệu được nạp đầy đủ, lấy yếu tố đầu vào đầu tiên với type = 'text', và áp dụng chiều cao và chiều rộng của nó cho tất cả các yếu tố đầu vào với type = 'password' ".

Tôi đã thử nghiệm điều này trên IE7 chỉ, và nó hoạt động như một sự quyến rũ.

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

Đây là câu trả lời tổng quát (lấy phần tử đầu tiên khớp với đầu vào [loại = 'văn bản']). Bạn có thể lấy một tham chiếu đến một phần tử cụ thể mà bạn muốn khớp, và sau đó lấy một tham chiếu đến một hoặc nhiều hộp mật khẩu với một số bộ chọn jQuery khác. Có một cái nhìn tại các tài liệu hướng dẫn để nhận các yếu tố bằng id hoặc một nhóm các yếu tố của một biểu thức thông thường lớp css hoặc xpath-type:

http://docs.jquery.com/Selectors

Nguồn

2009-03-27 15:26:46 Rich

Vấn đề là mã hóa mặc định của Internet Explorer. Internet Explorer có vấn đề hiển thị độ dài trường giống nhau khi sử dụng mã hóa UTF-8. Trong IE, hãy thử thay đổi mã hóa thành "Windows" (Trang-> Mã hóa trong IE 8) trong khi xem trang sự cố và bạn sẽ thấy chính xác ý tôi.

Nguồn

2009-07-18 15:22:33

Không thể đưa ra câu trả lời này đủ! Không bao giờ có thể đoán rằng mã hóa sẽ là nguyên nhân, nhưng điều này đã giải quyết được vấn đề của tôi _perfectly_! – thejonwithnoh

Tại sao IE tạo hộp mật khẩu nhỏ hơn hộp văn bản?

Trả lời

Các vấn đề liên quan