Question

我遇到过Firefox的问题，如果将边框应用于图像，则会在右侧创建间隙。

<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：http://jsfiddle.net/r2GLU/

问题是为什么会出现这种行为？我想首先不应该将border-box应用于图像，但我认为它也不被禁止，Firefox也是唯一有问题的人。

Answer 1

我认为你在Firefox中遇到了一个错误。原始未调整大小的图像高163像素，长421像素。

现在，查看Firebug中的计算样式，img具有这些值（我添加了注释，显示了它们的计算方式）：

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 */

div有这些值：

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 */

错误是最后一次计算。应该是：

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

Answer 2

发现由于未指定 width 而导致的问题;

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

这仍是一个明显的错误。

如果在Firefox中的图像上应用border-box会发生什么

2 个答案: