Css 如果在Firefox中对图像应用边框框，会发生什么情况

我在Firefox中遇到了一个问题，即如果将边框框应用于图像，则会在右侧创建一个间隙

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

仅限Firefox：

---

问题是为什么会有这种行为？我猜

边框框

本来不应该应用在图像上，但我也不认为它是被禁止的，Firefox是唯一有问题的

---

这仍然是一个明显的bug。

我认为您在Firefox中遇到了一个bug。原始的未调整大小的图像高163px，长421px

现在，看看Firebug中的计算样式，

img

有以下值（我添加了注释，说明它们是如何计算的）：

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

---

是的，一只虫子。我正在发布一个答案，解释这个bug的确切位置。刚刚发布的。与这个虫子的遭遇差点杀了我。分解一堆CSS花了几个小时。我搜索了bugzilla数据库，但找不到任何相关信息，但这不是最容易搜索的。我会自己提交bug，但我没有bugzilla帐户，也不想得到一个。如果其他人有bugzilla帐户并想发布它，这可能会很有用。

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

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