页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容 zoom

FF下zoom的替代方案单位em

发布：dxy 字体：[增加减小] 类型：转载

css 属性zoom是ie私有属性在FF中（或者说仅实现CSS标准的其他浏览器中）无法使用，一直在网上搜索它的替代方案，但没有收获，后来听群里有朋友说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 全选提示:你可先修改部分代码,再按运行]

Tags：firefox FF zoom

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：开发跨浏览器的JavaScript方法说明
下一篇文章：Javascript typeof 用法

·在百度中搜索关于“FF下zoom的替代方案单位em相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

FF下zoom的替代方案单位em

文章评论

同类文章

最近更新

热点排行

FF下zoom的替代方案 单位em

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

FF下zoom的替代方案单位em

同类文章

最近更新

热点排行