Alternative to zoom under FF unit em_javascript skills

The first is the calculation method of em. When this element and the parent element do not specify a font-size in em or percentage, 1em is strictly equal to 16px. When this element and the parent element specify a font-size in em or percentage, -size, multiply the product of all superior fontSizes on the basis of 16px.

Due to this property, you can set line-height instead of zoom to achieve the desired effect.

<title>CSS unit em</title> <style type="text/css"> span{ font-size:16px; } .domain{ padding:15px; } </style> <span>Normal 1em=16px</span> <div style="display:inline-block;width:1em;height:1em;background:green;"></div> <div class="domain" style="font-size:2em;border:solid 1px red;"> <span>style="font-size:2em;border:solid 1px red;" Here 1em=2x16=32px</span> <div style="display:inline-block;width:1em;height:1em;background:green;"></div> <div class="domain" style="font-size:3em;border:solid 1px blue;"> <span>style="font-size:3em;border:solid 1px blue;" Here 1em=2x3x16=96px</span> <div style="display:inline-block;width:1em;height:1em;background:green;"></div> <div class="domain" style="font-size:50%;border:solid 1px black;"> <span>style="font-size:50%;border:solid 1px black;" Here 1em=2x3x50%x16=48px</span> <div style="display:inline-block;width:1em;height:1em;background:green;"></div> </div> </div> </div>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]