IE 8 - проблема с отображением семейства шрифтов

У меня есть приложение с начальной страницей входа в систему, на которой есть поле ввода имени пользователя и пароля. Эта страница отлично работает в IE 7, Safari, Firefox 4 и 5, но не в IE 8 и 9. В IE 8/9 имя пользователя и пароль отображаются с полями ввода разного размера, когда вы настраиваете процент масштабирования. Во время тестирования я заметил, что в IE 8/9 режим документа находится в режиме Quirks. Поэтому я попытался установить режим документа в IE 9 в стандартном режиме IE 9, и страница отображается правильно. Однако в IE 8 это не влияет. Единственное, что мне удалось заставить работать, это переопределить семейство шрифтов в таблице стилей для полей ввода. Это работает для IE 7,8 и 9, а также для Safari и Firefox.

Я также пытался установить теги DOCTYPE и meta, но ни одна из этих комбинаций не работает в IE 8.

Я включил тестовую таблицу стилей и html ниже, которые воспроизводят проблему.

Кто-нибудь знает, зачем это нужно IE 8/9? Есть ли другой способ справиться с этим, кроме переопределения семейства шрифтов?

Спасибо.

Приведенная ниже таблица стилей работает в IE 7, Safari и Firefox 4 и 5. В IE 8/9 имя пользователя и пароль отображаются с разной длиной, если я не использую закомментированную строку:

таблица стилей:

body                   { font-size: x-small; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;} 


form                    { font-size: 100%; }
input                   { font-size: 110%; }
/*input                   { font-size: 110%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }*/
INPUT.TEXT              { font-size: 100%; }
select                  { font-size: 110%; }
textarea                { font-size: 110%; }

HTML:

<html>
<head>                 
<title>Login</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body>                  
<table>                 
<tr><td>User&nbsp;Name: </td><td><input type=text name=username size=20 value=""></td></tr>
<tr><td>Password: </td><td><input type=password name=pass size=20></td></tr>
<tr><td>&nbsp;</td><td><input type=submit value=Login></td></tr>
</table>                
</body>
</html>

css ie8-compatibility-mode
person Bruce    schedule 14.06.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Длина вашего ввода зависит от размера шрифта. Но многие элементы формы не наследуют ваше семейство шрифтов. Протестируйте его с помощью необычного шрифта (Comic Sans MS) и большого размера шрифта.

Связано (за исключением того, что первый ответ неверен, тип ввода do не наследовать семейство шрифтов).

Вы можете установить размер ввода в CSS (width:200px).

Небольшое примечание: INPUT.TEXT не указывает ни на один элемент. .text — это класс.

person Kraz    schedule 14.06.2011
comment
Хорошо. Спасибо. Я до сих пор не понимаю, почему семейство шрифтов наследуется в IE 7, Safari и Firefox, но в IE 8/9 вам нужно указать семейство шрифтов для ввода. - person Bruce; 14.06.2011
comment
Он не передается по наследству, если вы не принуждаете его. Поиграйте с этот jsFiddle, и вы поймете. Я не могу протестировать IE7, но я уверен, что это вопрос рендеринга шрифта по-другому. Так что да, для IE вам нужно переопределить атрибут шрифта... - person Kraz; 14.06.2011