2

我在 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;
}

仅限火狐：http: //jsfiddle.net/r2GLU/

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

4

2 回答 2

2

我认为您在 Firefox 中遇到了错误。原始的、未调整大小的图像是 163 像素高 x 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 */
于 2012-05-17T20:14:54.973 回答
1

发现问题是因为没有指定宽度引起的；

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

这仍然是一个明显的错误。

于 2012-05-17T20:12:03.650 回答