2

幅が 49% の div があります (レスポンシブ レイアウトの一部として)。この div には、2 つの画像が重ねられています。1 つは相対的に配置され、もう 1 つは絶対的に配置されています。それらは両方とも親の中心にあります - を使用する相対的margin: 0 auto;なものと を使用する絶対的なものmargin:0 auto; left:0; right:0;です。

現在、Chrome では (ウィンドウ幅に応じて) 絶対画像と相対画像の間に 1 ピクセルまたは 2 ピクセルのオフセット差が生じることがあります。これは、画像要素を検査するときに私の Fiddleで確認できます。Chrome で違いが見られない場合は、ウィンドウのサイズを少し変更してみてください。

Chrome 21 for Windows でこの違いが発生しています。Firefox や IE には存在しないので、これは Chrome の既知のバグなのか、また修正はあるのでしょうか?

更新:親のパーセンテージ幅の結果ではないようですが、親のピクセル幅が不均一な場合に表示されます。更新された Fiddleを参照してください。

4

1 に答える 1

2

本当に興味深いのは、使用することで両方が論理的に同じであるという立場です

.wrapper {
    position: relative;
    background-color: yellow;
    height: 200px;
    width: 215px;
}
.relative-img {
    display: block;
    width: 100px;
    position: relative;
    margin: 0 auto;
}
.absolute-img {
    display: block;
    width: 100px;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 0;
}

しかし、実際に両方の画像の左位置を取得しようとすると、左位置に.5pxの違いがあります 

relative-img - 65.5 
absolute-img - 66

このコンソールを参照してください

また、絶対値を割り当てて同じにしようとしました

$(".relative-img").offset().left =$(".absolute-img").offset().left;

しかし、それでも結果は同じです

relative-img - 65.5 
absolute-img - 66

驚いた ？

これに対する答えは次のとおりです: Chrome では値の小数部分が切り捨てられるため、65、65.5、および 65.6 はすべて同じ結果を示しますSkilldrickによる素敵なデモが聞こえます

于 2012-09-20T09:23:52.500 に答える