box-sizing css skin bug

[Jacques van Zuydam]

I use a set box-sizing parameter of "border-box" on all my objects in CSS, using the "*" selector. This is having a negative impact on how the buttons look on the new CKEditor 4 Beta. I "fixed" it by applying an auto height to a.cke_button Obviously I know it's not conventional use of border-box, however with pixel perfect web-design it really helps.

[Jacques van Zuydam]

Screen shot of Border-Box bug

[Jakub Ś]

Could you please provide sample page with CSS that is causing this problem?

[Jacques van Zuydam]

• {

box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;

}

This is the CSS that is causing the error, the skin's style uses fixed heights, and border-box includes padding into the fixed height, instead of adding extra pixels to the height which is the normal way CSS works without border-sizing. I have also seen this bug on the tabs of the pop-up screens, unfortunately the page is under development and I don't have the authority to add a url for you to look at.

[Jakub Ś]

This is happening in both CKE 3.0. and CKE 4.0 (Not a regression) Just put the below on your page:

<style>
    * { 
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	} 
</style>

Seems that styles work ok with default content box only.

[Piotrek Koszuliński]

I think that we have to add box-sizing to our CSS reset. Especially that it's becoming more and more popular as it fixes unnatural standard box model and is well supported even in IE8/9.

See "Is it safe to use?" section in ​http://paulirish.com/2012/box-sizing-border-box-ftw/

[Piotrek Koszuliński]

I attached sample on which issue can be verified on all supported browsers except IE7.

[Piotrek Koszuliński]

Pushed ​git:29b9297 for review.

[Olek Nowodziński]

Hopefully, this fix covers all possible cases.

[Piotrek Koszuliński]

Masterised ​git:2112bc4