FF下zoom的替代方案單位em

2019-11-21 01:39:31

字體：大中小

來源：轉載

供稿：網友

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

由這個性質可以通過設置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="iwvjtn8m0"   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="iwvjtn8m0"   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="iwvjtn8m0"   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需刷新才能執行]

上一篇：json編寫簡單一例

下一篇：鼠標放上去觸發一個javascript提示框效果代碼