Почему IE делает блокировку паролей меньше текстовых полей?

См. простую форму ниже. Это просто текстовое поле поверх окна пароля. Если вы посмотрите на него в Internet Explorer 7 (и 8 и, возможно, на других), текстовое поле будет на 10 пикселей шире, чем поле пароля.

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

Есть ли способ "исправить" это глобально, либо через CSS, либо добавив что-то в HTML?

Ответ 1

Поскольку в этих типах полей используется другой шрифт.

Исправление - это просто указать, что все входы используют один и тот же шрифт.

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

Ответ 2

Вы можете добавить фиксированную ширину для всех входов на текущей странице:

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

Ответ 3

Проблема заключается в кодировке Internet Explorer по умолчанию. В Internet Explorer проблема с отображением длины поля одинакова при использовании кодировки UTF-8. В IE попробуйте изменить кодировку на "Windows" (Page- > Encoding в IE 8) во время просмотра страницы проблемы, и вы точно увидите, что я имею в виду.

Ответ 4

Если вы включаете библиотеку jQuery на свои страницы, вы можете использовать следующий код для:

"Когда документ полностью загружен, возьмите первый элемент ввода с типом =" текст "и примените его высоту и ширину ко всем входным элементам с типом =" пароль ".

Я тестировал это только на IE7, и он работал как шарм.

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

Это обобщенный ответ (взяв первый элемент, который соответствует вводу [type = 'text']). Вы можете получить ссылку на определенный элемент, который вы хотите сопоставить, а затем получить ссылку на один или несколько полей с другим селектором jQuery. Посмотрите документацию по получению элементов по id или группе элементов с помощью общего класса css или выражения типа xpath:

http://docs.jquery.com/Selectors

Ответ 5

Установка ширины в текстовых полях будет решаться, но я предполагаю, что не то, что вы хотите.

Попробуйте установить минимальную ширину на входе [type = text], введите [type = password] на нечто большее, чем значение по умолчанию для текстовых полей. Вероятно, вам понадобится http://deanedwards.me.uk IE8 script, чтобы эти селекторы работали.

Ответ 6

Размер шрифта не имеет значения. как видно из этого теста здесь: http://build.jhousemedia.com/ie_test.php

Я хотел бы дать вам твердый ответ о том, почему, но работа вокруг заключается в применении к нему фиксированной ширины.