Высота кросс-браузерного шрифта - PullRequest
Новая
       9

Высота кросс-браузерного шрифта

1 голос
/ 21 марта 2019

Как видите, outline свернуто в следующем примере: 

var input = document.getElementById('input');
var output = document.getElementById('output');
input.addEventListener('input', function() {
  output.value = input.value;
});
output {
  display: block;
  font: 20px Arial;
  outline: 1px solid green;
}
<input id="input">
<output id="output"></output>

Как я могу предотвратить это?Нужно ли давать output фиксированный height?Если это так, какое значение я должен дать height, если я хочу, чтобы он был таким же высоким, как высота текста, а не произвольным числом?Есть ли кросс-браузерное решение?

1 Ответ

3 голосов
/ 21 марта 2019

Проблема в том, что элементы без содержимого сворачиваются до нулевой высоты.Это соответствует спецификации CSS.К счастью, есть и хорошее решение CSS для этой проблемы. 

var input = document.getElementById('input');
var output = document.getElementById('output');
input.addEventListener('input', function() {
  output.value = input.value;
});
output {
  display: block;
  font: 20px 'Arial';
  outline: 1px solid green;
}

output:empty::after {    /* when the output is empty, */
  content:'\00A0';       /* add some content to make sure it's not */
}
<input id="input">
<output id="output"></output>

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

var input = document.getElementById('input');
var output = document.getElementById('output');
input.addEventListener('input', function() {
  output.value = input.value;
});
output {
  display: block;
  font: 20px/24px 'Arial';      /* added line height */
  min-height: 24px;             /* set minimum height explicitly */
  outline: 1px solid green;
}
<input id="input">
<output id="output"></output>
...