Setting display:

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 ie the width and height of the element include the padding and border. This does not happen in Webkit based browsers.

Here 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.

链接地址: http://www.djcxy.com/p/75582.html

上一篇: 阴影添加到元素的大小

下一篇: 设置显示: