本文详细介绍了如何利用em单位解决跨浏览器兼容性问题，特别是在IE私有属性zoom无法在Firefox等浏览器中使用的情况下，通过调整line-height实现相似效果。
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>
<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以达到想要的效果
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
