FF下zoom的替代方案：单位em

css 属性zoom是ie私有属性 在FF中（或者说仅实现CSS标准的其他浏览器中）无法使用，一直在网上搜索它的替代方案，但没有收获，后来听群里有朋友说em或可解决此问题，经过研究和测试，发现果然可以解决。

首先是em的计算方式，当本元素和父级元素没有指定以em或者百分比为单位的font-size时，1em严格等于16px,当本元素和父级元素指定了以em或者百分比为单位的font-size时，则在16px的基础上乘以所有上级fontSize的积。

如 

<! 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;" < br /> 这里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;" < br /> 这里1em=2x3x16=96px </ span >
         < div  style ="display:inline-block;width:1em;height:1em;background:green;" ></ div >
         < br />
         < div   class ="domain"  style ="font-size:50%;border:solid 1px black;" >
             < span > style="font-size:50%;border:solid 1px black;" < br /> 这里1em=2x3x50%x16=48px </ span >
             < div  style ="display:inline-block;width:1em;height:1em;background:green;" ></ div >
             < br />
         </ div >
     </ div >
</ div >
</ body >
</ html >

 

由这个性质 可以通过设置line-height来代替zoom以达到想要的效果