14 июля 2008 от CashBy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<form action="" id="fmain">
<input type="text" class="fedit" />
</form>
</body>
</html>
И определим стиль для поля ввода в css-файле:
.fedit{
border:1px solid #ccc;
background:#dfd;
height:30px;
width:120px;
font-size:14px;
font-family:Tahoma;
}Теперь смотрим, как это все дело выглядит в разных браузерах:
Просто ужас.
Как выровнять по вертикали? vertical-align не работает, можно не пробовать. Для IE есть решение: указать line-height. Но вот огнелису это не помогает.
Возможно, решение, которое будет работать везде, для кого-то и покажется очевидным. Но даже простые и очевидные вещи подчас таковыми не кажутся. А вот, собственно и решение: подобрать значение padding для поля ввода. В итоге получим:
.fedit{
border:1px solid #ccc;
background:#dfd;
height:16px;
width:110px;
font-size:14px;
font-family:Tahoma;
padding: 6px 5px 8px 5px;
}При этом выбираем значение высоты поля на пару пикселей больше высоты шрифта, до нужной высоты "догоняем" с помощью padding. Чтобы текст был визуально посередине, padding-bottom должен быть чуть больше.
Да, и не забываем убить второго зайца: делаем отступы справа и слева (я сделал на 5px) и после этого уменьшаем длину поля на сумму этих добавленных отступов. И...
