divの背景色とdivの背景色の間に小さな隙間があります。

Question

私は別のHTMLタグの内部にhtmlタグを持ち、内側のhtmlタグに直線グラデーションの背景を付けました。内側のdivタグとcontainer-divの間の隙間を、グラデーションの最も暗い色調で塗りつぶしたいと思います。私が実装したソリューションは機能しますが、一部のコンピュータでは、コンテナの背景とコンテナの線形グラデーションの背景のあいだに小さなギャップがあります。他に誰かがこれに遭遇しましたか？

<div class="image-wrapper"> 
    <div class="container"> 

    </div> 
</div> 

CSS：

.image-wrapper { 
    width: 200px; 
    height: 100px; 
    background-color: white; 
} 

.container { 
    height: 100px; 
    position: relative; 
    max-width: 100px; 
    left: 75px; 
    background: linear-gradient(to right,rgba(45,51,64,.6),transparent 75%); 
} 

.container:after { 
    content: ''; 
    position: absolute; 
    top: 0px; 
    right: 100px; 
    width: 20%; 
    height: 100px; 
    background: rgba(45,51,64,.6); 
} 

HERESにコードのフィドル：/ 03L4ub4r/1/

このバイオリンは私に問題を再現せず、また、私はそれを再現することができますよ私自身のコンピュータ。

デベロッパーツールでアフタータグをいずれかの方向に1ピクセルずつ移動すると、ギャップが大きくなるか、または他の背景と重なります。

このバグは、次のようになります。 http://postimg.org/image/yvgdtwuzb/a0499505/

これがギャップを生成した1つのピクセル自己は自分のコンピュータ上で次のようになります。 http://postimg.org/image/rbeamjo4f/a73784a1/

それは線形グラデーションのように見えるかもしれませんが1ピクセルを追加します指定されたものよりも低い不透明度を持つ境界線。誰もこのような線形勾配のバグを経験しましたか？

Answer 1

なぜバグが発生したのか分かりませんでしたが、別の方法で問題を解決しました。グラデーションをdivタグの中央から作成し、画面全体を塗りつぶすまで拡張し、グラデーション部分をほぼ内側のdivの幅で停止します。そうすることで、内部のdivタグの外側の領域は、グラデーションの最も暗い色合いで塗りつぶされます。

.container:before { 
    content: ''; 
    position: absolute; 
    top: 0px; 
    right: 50%; 
    width: 200%; 
    height: 100px; 
    background: linear-gradient(to left,transparent 0,rgba(45,51,64,.6) 600px); 
} 

Answer 2

パディングと余白を試してみましたか？ 一部のブラウザでは、divの1つにわずかなパディングや余白が追加されることがあります。