Question

I have encountered an issue with Firefox that if border-box is applied to an image, a gap is created on the right side.

<div id="sl">
  <img class="der" src="https://www.google.com/logos/2012/francois_truffaut-2012-hp.jpg"/>
</div>

#sl
{
  background-color: #ff0;
  display: inline-block; 
}

body
{
  background-color: #f00;
}

.der
{
  height: 60px;   
  display: block;
  border: 1px solid #00f;
  -moz-box-sizing: border-box;
}

Firefox only: http://jsfiddle.net/r2GLU/

The question is why is this behavior? I guess that border-box shouldn’t have been applied on image in the first place, but I don’t think that it is forbidden either and Firefox is the only one who has problems.

Answer 1

I think you’ve encountered a bug in Firefox. The original, un-resized image is 163px high by 421px long.

Now, looking at the computed styles in Firebug, the img has these values (I’ve added comments showing how they were computed):

height: 58px;      /* img-height = box-height - box-border = 60 - 2 = 58 */
width: 149.8px;    /* img-width = img-height * aspect-ratio = 58 * (421 / 163) = 149.8 */

And the div has these values:

height: 60px;      /* div-height = img-height + box-border = 58 + 2 = 60 */
width: 156.967px;  /* div-width = div-height * aspect-ratio + box-border = 60 * (421 / 163) + 2 = 156.967 */

The bug is that last computation. It should have been:

width: 151.8px;  /* div-width = img-height * aspect-ratio + box-border = 58 * (421 / 163) + 2 = 151.8 */