跨浏览器字体高度

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:'\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>