FF下zoom的替代方案单位em


答案：首先是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需刷新才能执行]

上一个：比较详细的XMLDOM对象方法详解第1/2页
下一个：javascript charAt() arr[i]数组实例代码

更多图片编程知识:

FF下zoom的替代方案 单位em

FF下zoom的替代方案单位em