FF下zoom的替代方案單位em

更新時間：2008年08月17日 18:55:05 作者：

css 屬性zoom是ie私有屬性在FF中（或者說僅實現(xiàn)CSS標準的其他瀏覽器中）無法使用，一直在網(wǎng)上搜索它的替代方案，但沒有收獲，后來聽群里有朋友說em或可解決此問題，經(jīng)過研究和測試，發(fā)現(xiàn)果然可以解決。

首先是em的計算方式，當本元素和父級元素沒有指定以em或者百分比為單位的font-size時，1em嚴格等于16px,當本元素和父級元素指定了以em或者百分比為單位的font-size時，則在16px的基礎(chǔ)上乘以所有上級fontSize的積。

由這個性質(zhì) 可以通過設(shè)置line-height來代替zoom以達到想要的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS單位em</title> <style type="text/css"> span{ font-size:16px; } .domain{ padding:15px; } </style> </head> <body> <span>正常的1em=16px</span> <div style="display:inline-block;width:1em;height:1em;background:green;"></div> <div   id="ublnpf9mb"   class="domain" style="font-size:2em;border:solid 1px red;"> <span>style="font-size:2em;border:solid 1px red;"這里1em=2x16=32px</span> <div style="display:inline-block;width:1em;height:1em;background:green;"></div> <div   id="ublnpf9mb"   class="domain" style="font-size:3em;border:solid 1px blue;"> <span>style="font-size:3em;border:solid 1px blue;"這里1em=2x3x16=96px</span> <div style="display:inline-block;width:1em;height:1em;background:green;"></div>  <div   id="ublnpf9mb"   class="domain" style="font-size:50%;border:solid 1px black;"> <span>style="font-size:50%;border:solid 1px black;"這里1em=2x3x50%x16=48px</span> <div style="display:inline-block;width:1em;height:1em;background:green;"></div>  </div> </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]