Странное отображении текста в поле формы в Firefox

clock · December 1, 2010

Здравствуйте!

Не сталкивался ли кто со странностью в FF, когда текст в поле при заданных размерах шрифта и ширины поля не умещается в видимой части поля ?

Вот страница, которая корректно отображается в FF, IE6+, Хром 7, Сафари 4, Опера 10:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>input test</title>
<style type="text/css">
#date1, #date2 {	
	font-family: Arial, sans-serif;	
	font-size:12px;
	width:64px;
	padding:0;	
	margin:0;
	border:1px solid red;
}
 </style>

</head>
<body>

<form method="get" action="script.php">
<fieldset>
<input type="text" name='date1' id="date1" value="01.11.2010" /> -
<input type="text" name='date2' id="date2" value="12.08.1999" />
<span>введите даты</span>
<input type="submit" value="отправить" />
</fieldset>
</form>   

</body>
</html>

Но стоит теперь поменять размер шрифта и ширину элемента на следующие (а мне нужно добиться корректного отображения именно при таких размерах):

font-size:12px;
width:64px;

то в FF текст "срезается". В остальных браузерах при этом все нормально.

Заметил такое в FF начиная 3.6.10, потом обновился до 3.6.11, там стало все нормально отображаться, но через какое-то время опять начались такие же баги. Т.е. иногда баг есть, иногда - нет. Не могу понять причину такого явления.

Хотя визуально заметно, что текст во втором случае рендерится как будто с большим letter-spacing.

Можно конечно ставить letter-spacing:-1px, но в других браузерах при этом все некрасиво выглядит.

Что подскажете ?

Edited December 1, 2010 by clock

Great Rash · December 1, 2010

Может быть дело в том что в FF другой алгоритм сглаживания текста. Если вам нужно задавать ширину инпута точно по размеру текста, то лучше использовать для этого ex вместо px.

clock · December 2, 2010

Может быть дело в том что в FF другой алгоритм сглаживания текста. Если вам нужно задавать ширину инпута точно по размеру текста, то лучше использовать для этого ex вместо px.

Еще выяснил, что если заменить шрифт на Verdana или Tahoma и подобрать ширину поля, то все нормально во всех браузерах. А вот глюки именно с Arial.

Если задавать через "ex", то становится хуже, в том смысле, что теперь в разных браузерах все отличается...

Sign In

Странное отображении текста в поле формы в Firefox

Question

clock

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

clock

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information