Почему 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?

6 52
html css internet-explorer-8 rendering

6 ответов:

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

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

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

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

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

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

3

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

"когда документ полностью загружен, возьмите первый элемент ввода с типом= 'text'и примените его высоту и ширину ко всем элементам ввода с типом='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. Взгляните на документацию для получения элементов по идентификатору или группе элементов по общему классу css или выражению типа xpath:

http://docs.jquery.com/Selectors

1

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

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

0

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

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

0