CSS：画像の重なり - 余分な透明な線の表示

Question

2枚の画像を重ね合わせたとき余分な境界線が生じます。このページには主に画像と静的な拡大鏡が含まれています。このイメージをjavascriptでホバリングすると、元の画像の一部が拡大鏡に表示されます。

拡大鏡は、中央に透明の穴を持つPNGです：

magnifier

問題はイムは拡大鏡の黒い線の周りに余分な透明の境界線を取得していることです。この薄いボーダーを通して、元のイメージが輝きます。デモンストレーションとして、私は各側に20pxの拡大鏡イメージをサイズ変更し、その周りに黒い枠線を追加しました。それは、透明な線が全体のイメージの周りに現れず、その内部に現れることを示しています。

transparent ghost border

コードは以下の通りです：

HTML：

<div id="left-image-block"> 
    <div id="magnifier_wrap"> 
    <div class="fullsize" style="display: inline; left: 0px; top: 0px;"> 
     <img src="/path/to/image.jpg" width="250" style="display: inline;" /> 
    </div> 
    <div class="magnifier" style="border: 1px solid black;"> 
     <img src="/path/to/magnifier.png" /> 
    </div> 
    </div> 
</div> 

CSS：

#magnifier_wrap { position: relative; width: 250px; height: 292px; overflow: hidden; z-index: 100; } 
#magnifier_wrap .magnifier { position: absolute; left: 0; top: 0; } 
#magnifier_wrap .fullsize { display: none; position: absolute; } 

任意のアイデアは？

Answer 1

この.fullsize> IMG {ボーダー：なし;}試みる場合は、私がデモンストレーションとして添加ブラック1ピクセルの境界線ではない