<input> имеет минимальный line-height в зависимости от размера шрифта.Установка обоих элементов на большее значение line-height работает, как и удаление line-height в целом.Но это все еще не позволяет вам иметь меньшую высоту, чем минимальная.Исправление для этого заключается в использовании псевдоэлемента first-line и установке его на display: inline-block;.
Демо: http://jsfiddle.net/ThinkingStiff/B7cmQ/
CSS:
.normalised:first-line {
display: inline-block;
}
Но это не объясняет, почему <input> действует иначе, чем <div>.Даже -webkit-appearance: none; не исправил это.Казалось бы, на входах есть невидимое вуду, которое рассматривает его содержимое как inline.inline элементы имеют минимальное значение line-height в зависимости от размера шрифта, который мы наблюдаем здесь.Вот почему first-line исправляет это.Кажется, это стиль дочернего элемента <input>.
. Вот демонстрация, которая показывает минимум line-height для inline элементов.<div> элемент награждает line-height: 7px;.<span>, хотя его вычисленное значение показывает 7px;, визуально его не учитывает.
Демонстрация: http://jsfiddle.net/ThinkingStiff/zhReb/
Вывод:
HTML:
<div id="container">
<div id="div-large">div <br />large</div>
</div>
<div id="container">
<div id="div-medium">div <br />med</div>
</div>
<div id="container">
<div id="div-small">div <br />small</div>
</div>
<div id="container">
<span id="span-large">span <br />large</span>
</div>
<div id="container">
<span id="span-medium">span <br />med</span>
</div>
<div id="container">
<span id="span-small">span <br />small</span>
</div>
CSS:
#container {
background-color: lightblue;
display: inline-block;
height: 200px;
vertical-align: top;
}
#div-large {
line-height: 50px;
}
#div-medium {
line-height: 20px;
}
#div-small {
line-height: 7px;
}
#span-large {
line-height: 50px;
vertical-align: top;
}
#span-medium {
line-height: 20px;
vertical-align: top;
}
#span-small {
line-height: 7px;
vertical-align: top;
}