Le texte ne s'aligne pas correctement - problème de taille de police?

Question

J'essaye d'aligner le texte sur le dessus d'une image de telle manière qu'il reste aligné même si l'image sous-jacente est augmentée/diminuée dans la taille. J'utilise des valeurs px qui ont été prises à partir de mesures Photoshop.

Veuillez jeter un coup d'œil à http://jsfiddle.net/dXNgx/. Le mot "Pour" est superposé sur l'image. Il mesure 20px de hauteur, mais lorsqu'il est placé sur l'image, font-size: 20px; donne un "For" plus petit que l'image sous-jacente. Ce qui donne?

Answer 1

Vous devez placer la div.layer en dehors de # page1, sinon -moz-transform: scale (.5); est appliqué à elle.

<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/