快捷導(dǎo)航

FF下zoom的替代方案單位em

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

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

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

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

<!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="vvxyksv9kd"   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="vvxyksv9kd"   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="vvxyksv9kd"   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需再刷新一下頁(yè)面才能執(zhí)行]