Cross-browser font height

[Rain Lover]

As you see the outline is collapsed in the following sample:

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>

DEMO

How can I prevent it? Do I need to give the output a fixed height? If so, what value should I give to the height if I want it to be just as high as the text height — not an arbitrary number? Is there a cross-browser solution?

[Ingolme]

You can use a CSS pseudo-selector to put some fake content inside the output element to allow it to keep its height.

output::before {
  content: ".";
  display: inline-block;
  width: 0;
  overflow: hidden;
}

 

[dsonesuk]

Use :'empty' pseudo to give min-height if empty

output:empty{min-height: 1em;}