Почему IE делает поля пароля меньше текстовых? - PullRequest
Новая
       10

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

52 голосов
/ 27 марта 2009

См. Простую форму ниже. Это просто текстовое поле поверх поля пароля. Если вы посмотрите на него в 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?

Ответы [ 6 ]

96 голосов
/ 27 марта 2009

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

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

<style type="text/css">
  input {
      font-family: sans-serif;                
  }
</style>
3 голосов
/ 18 июля 2009

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

3 голосов
/ 27 марта 2009

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

<style type="text/css">
input {
    width: 10em;    
}
</style>
1 голос
/ 27 марта 2009

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

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

Я протестировал это только на 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>

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

http://docs.jquery.com/Selectors

0 голосов
/ 27 марта 2009

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

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

0 голосов
/ 27 марта 2009

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...