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

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

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

источник

2009-03-27 Patrick McElhaney

Что касается причин, то я предполагаю, что это имеет какое-то отношение к «угадыванию» того, сколько символов может поместиться в поле (атрибут size также указывает, сколько символов должно соответствовать). А поскольку звездочка или пуля меньше, чем нижний регистр m, например ... вы получаете разную ширину. – Joey

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

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

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

источник

2009-03-27 15:13:59

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

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

источник

2009-03-27 15:15:06 Macha

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

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

источник

2009-03-27 15:15:08

Обратите внимание, что это задает ширину для всех ваших входных элементов, а не только текстовых полей. Рекомендуем установить класс текстовых полей в текстовые поля, а затем создать стиль CSS для input.textbox –

@Richard E. Зачем устанавливать класс? input [type = "text"], input [type = "password"] – phihag

Поскольку селектора [attribute] не работают в IE. – bobince

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

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

источник

2009-03-27 15:21:41 jerebear

Ваш тест показывает, что размер шрифта наиболее важен. Разве вы не видите, что существует разница в размере между двумя первыми полями и двумя следующими полями с другим размером шрифта? – Guffa

Если включить библиотеку 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. Посмотрите документацию для получения элементов по идентификатору или группы элементов с помощью выражения общего класса CSS или XPath типа:

http://docs.jquery.com/Selectors

источник

2009-03-27 15:26:46 Rich

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

источник

2009-07-18 15:22:33

Невозможно выдвинуть этот ответ достаточно! Никогда бы не догадался, что кодировка будет причиной, но это решило мою проблему _perfectly_! – thejonwithnoh

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

ответ

Смежные вопросы