テキストが正しく整列していない - フォントサイズの問題？

Question

イメージの上にテキストを整列させようとしていますが、イメージのサイズが増減しても整列したままになります。私はPhotoshopの測定値から得られたpx値を使用しています。

http://jsfiddle.net/dXNgx/をご覧ください。 「For」という言葉がイメージに重なっています。高さは20ピクセルですが、イメージ上に置かれた場合、font-size: 20px;の結果は、下にあるイメージよりも小さい "For"になります。何がありますか？

Answer 1

div.layerを＃page1の外側に配置する必要があります。それ以外の場合は-moz-transformとします。scale（.5）;それに適用されます。

<a href="#" id="zoom_in">Zoom In +</a> | <a href="#" id="zoom_out">Zoom Out -</a> 
<div style="position:relative;"> 
    <div style="-moz-transform:scale(.5); -moz-transform-origin:left top;position:absolute;" class="page" id="page1"> 
     <div class="layer" style="z-index:1;"> 
      <img src="http://cobalt.xtracta.com/images/image.jpg" style="width:2480px; height:3508px"> 
     </div> 
    </div> 
    <div class="layer" style="z-index:2;"> 
     <div style="font-size: 20px; position:absolute; color:#F00; top: 1550px; left: 306px;">For</div> 
    </div> 
</div> 

http://jsfiddle.net/dXNgx/2/