FF下zoom的替代方案单位em

时间：2020-10-15 09:31:41|栏目：JavaScript代码|点击：次

首先是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 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 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 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需再刷新一下页面才能执行]

上一篇：JS的IE和Firefox兼容性集锦

栏目：JavaScript代码

下一篇：javascript模拟的Ping效果代码（Web Ping）

本文标题：FF下zoom的替代方案单位em

本文地址：http://www.codeinn.net/misctech/11464.html

更多JavaScript代码

JavaScript代码

FF下zoom的替代方案单位em

阅读排行

推荐教程

JavaScript代码

FF下zoom的替代方案 单位em

阅读排行

推荐教程

FF下zoom的替代方案单位em