CODEWITHSUNDEEP
htmlcssfirefoxborder-box
kobber
kobber

Reputation: 55

box-sizing: border-box sizing issue in Firefox

I came across a strange issue when testing a site in FF.

The situation is this:

When I add padding to the wrapper, I expect the wrapper to remain the same height, and the image to remain the same aspect ratio, but shrink to fit the height minus the padding. The width of the wrapper should change to match the new width of the image, plus the padding.

This behaves as expected in Chrome and IE on both OSX and Win7, but in FF the width of the wrapper seems to remain the same as if no padding was added.

Am I missing something, or is this a bug in the implementation of box-sizing in Firefox?

This fiddle demonstrates the issue:

http://jsfiddle.net/3j43Y/1/

Screenshots:

enter image description here Result in Chrome

First image is the result in Firefox, the second one is Chrome.

Upvotes: 4

Views: 2361

Answers (3)

Yohan M
Yohan M

Reputation: 1

Another way to analyze, it is also necessary to be careful with the statement of the doctype of the document.

If you have an old doctype, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Firefox will not consider box-sizing: border-box;

For html 5, it is necessary to declare the doctype as follows: <!doctype html> it will fix Firefox, it will take the box-sizing correctly.

Upvotes: 0

Bryan Willis
Bryan Willis

Reputation: 3642

@BYossarian's answer is correct. The answer below is a possible workaround when coming across the issue.

Since .wrapper is set to a specific height, we can add the padding to the image and get the desired effect we are looking for.

Demo:

<style type="text/css">
* {
   -moz-box-sizing: border-box;    
   box-sizing: border-box;    
}

.wrapper {
   float: left;
   height: 100px;
   background: #99ccff;
}

.wrapper img {
   height: 100%;
   padding: 8px;
}
</style>

<div class="wrapper">
   <img src="http://placehold.it/250x150" alt="">
</div>

Upvotes: 1

Ben Jackson
Ben Jackson

Reputation: 11922

This appears to be a bug, but it's not calculating the width as if no padding is applied. It's calculating the width as if the content (the <img> tag) has the width it would have were there no padding applied. It's then adding padding on top of this incorrectly calculated content width.

i.e. With no padding, the <img> element has a width of 167px. If you then add padding it should shrink (because of the height constraint) and .wrapper's width should now be the width of the shrunken <img> width plus the padding. Instead, (in FF at least) .wrapper's width is the width of the unshrunken <img> width plus the padding (167 + 16).

At least, that's what I'm seeing.

Also, it looks like you can see the same in Chrome (35.0.1916.114) if you toggle the padding rule on/off in dev tools. Initially Chrome gets it right, but then you see the same erroneous behaviour after toggling padding.

Upvotes: 4

Related Questions