2

Firefoxで、border-boxを画像に適用すると、右側にギャップが作成されるという問題が発生しました。

<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だけです。

4

2 に答える 2

2

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 */
于 2012-05-17T20:14:54.973 に答える
1

Found the issue to be caused because of not specifying the width; 

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

Still this is an obvious bug.

于 2012-05-17T20:12:03.650 に答える