Let me start by saying thank you for including the fiddle, that tends to makes things much easier to understand.

Unfortunately in this case I don't see what the problem is. In your title you say "Cross-Browser", is the problem only occurring in certain browser(s)? If so, where does it work and where does it not work?

output {
display: block;
font: 20px Arial;
height: 20px;
outline: 1px solid green;
}

:: insert boilerplate about all the arguments against forcing an explicit font size ::

I'm with her ^^^

Which browsers are failing?

(Note: couldn't view the demo ... I surf with js disabled. I suspect that means your site would be invisible to me, too.)

@NickMNS and @tangor: The output outline is collapsed when it's empty, but it's all right when there's a content. I can solve this problem by giving a fixed height to the output, but the question is: what is the right value? In Chrome it's height: 23px and in Firefox it's height: 24px. Why do they show different height values and what is a cross-browser solution?

@lucy24: To be honest, I'm more confused now! Would you mind elaborating?

A simple fix, that is a bit hacky, is to add an empty character.

<input id="input">
<output id="output">&nbsp;</output>

You could also use min-height:23px;

But the correct solution is to deal with the font height. In fact I believe it has to do with the line spacing. I fixed the problem on one of my sites recently, I need to look up the solution. I'll be back with that once I get the chance to look it up.

Ok! I'm back.
To ensure that the height remains the same across browsers (Chrome/Firefox) I set a line-height. This doesn't solve the collapse problem, but to solve that you can use one of the solutions proposed above.

output {
 display: block;
 font: 20px Arial;
 height: 20px; //<-- set height to prevent collapse
 outline: 1px solid green;
 line-height:1.35; //<--- set line-height to ensure that height is constant across broswers.
}

Would you mind elaborating?

Your sites are presumably viewed by a variety of humans on a variety of devices, viewed from a variable distance. (If all of your users are 19-year-olds with 20-20 visions using the machines in their school's computer lab, disregard the rest of this post.) Because of this, many of your human users have set a preferred font and/or size in their browser. Depending on the human, it may be larger or smaller than what the site designer perceives as normal text size. This is what you get when the CSS says "100%" or "medium". When the CSS instead says "125%" or "80%" or "x-small" or what-have-you, the browser calculates a proportion of the human viewer's default size.

All of this falls apart when the site says, instead, 22pt or 10pt or any other explicit number.

I'm in agreement with lucy24 here. In addition, a snippet of html, css and javascript is not enough to guess what else might be affecting output. A competent inspector tool for the browser bar is one option to see what other css might cause a problem, or a visit to the css validator tool: [jigsaw.w3.org...] could also point out problems (and how to resolve them). And outline is not the same as border. The outline is not a part of an element's dimensions, and output is not a block element. Define the container.

We like to help with ideas and troubleshooting but I'm not a fan of fixing one piece of a problem while guessing what else is at play. Explicit font sizes rather than leveraging browser defaults can throw a wrench in the works. Just saying.

Changing ponies in mid-stream is not an easy thing. Where possible use natural defaults and avoid anything EXPRESSED unless it is absolutely necessary (and 99 times out of a 100 there is no good reason to express outside of defaults).