Setting display: -moz-box causes elements to use border-box sizing in Firefox

I'm running into a issue where by setting an element's display property to display: -moz-box causes that element to start using the border-box sizing model in Firefox i.e. the width and height of the element include the padding and border. This does not happen in Webkit based browsers.

He开发者_JS百科re is the link to the JSFiddle that illustrates what I'm talking about: http://jsfiddle.net/S3BCa/

I'm wondering if this is a bug in Firefox (can't seem to find any documentation about it if it is) or if there is a workaround to make this consisten across all browsers?

Yes, this is a bug, currently nothing but border-box is implemented. This has historical reasons, the flexible box model was originally implemented for XUL only and border-box was the only supported sizing model. The relevant bugs are bug 73669 and bug 490359, with bug 635692 indicating a bunch of additional issues. I guess that this will be fixed eventually before the -moz prefix is dropped here, no idea when this will be however.

For now the only option to get consistent behavior across browsers would be specifying box-sizing: border-box. I don't think that there is a better solution, sorry.