跨浏览器字体高度

Question

如您所见，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 与文本高度一样高，我应该给它什么值——而不是任意数字？有跨浏览器的解决方案吗？

Answer 1

问题是没有内容的元素折叠到零高度。这符合 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:'[=11=]A0';       /* 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>

跨浏览器字体高度

Cross-browser font height

html

css

font-size