Как высота текстового блока рассчитывается в HTML

Question

Хотя я уже говорил блочную модель, но не может отслеживать Как высота текстового поля или любого HTML элемента вычисляется в следующем скрипку

<input type="text" id="test" onclick= "alert('computed height ' + window.getComputedStyle(this).height + ' and font-size ' + window.getComputedStyle(this)['font-size'])" name="test" value="Click here to get height" style=" 
 
    padding: 0px; 
 
    border: 0px;  
 
    line-height: 1; 
 
"/> 
 

Я не могу найти, как высота текстового поля составляет 15 пикселей, даже если граница 0, 0 маржа, 0 и 13.33 пикселей размер шрифта.

Edit- Хотя светлячок отлично работает по расчетам, но после того, как масштабирование она сокращает содержание некоторых

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

Answer 1

Вы проверили линию-высоту? попробуйте установить его на некоторое значение px

если высота не указана, а граница, заполнение - 0, то это будет значение строки-высоты, которое является причиной. У каждого браузера есть свой предварительно определенный css. поэтому вы должны перезагружать большинство из них в своем css (в основном наверху), поэтому все браузеры отображают то же самое

Редактирование: Я имел в виду, что строка-высота: 1 будет отличаться в каждом браузере на основе предопределенных стилей браузеров, вы первоначально сбросили высоту линии на тело. Легкий способ узнать значение высоты строки a px и проверить все браузеры

Answer 2

Почему вы не используете смещение. this.offsetHeight

see this code

Answer 3

Ok Вот объяснение, я узнал от Тринга.

См спецификацию http://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced

, который говорит

Высота области содержимого [коридорных элементов] должны быть основаны на шрифте, но эта спецификация не определяет, каким образом. БВС может, например, использовать эм-окно или максимальный зажим и спусковой шрифт ...

Chrome и противопожарные лисицы имеют различную реализацию линии высоту

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

FireFox- FireFox также игнорировать высоту строки, если она меньше размера шрифта, но это обеспечит точное место, предоставленное в качестве размера шрифта, даже если не в состоянии сделать его красиво.