FF下zoom的替代方案 单位em

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

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

CSS单位em

span{
font-size:16px;
}
.domain{
padding:15px;
}

正常的1em=16px

style="font-size:2em;border:solid 1px red;"
这里1em=2x16=32px

style="font-size:3em;border:solid 1px blue;"
这里1em=2x3x16=96px

style="font-size:50%;border:solid 1px black;"
这里1em=2x3x50%x16=48px

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

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

    首先是em的计算方式,当本元素和父级元素没有指定以em或者百分比为单位的font-size时,1em严格等于16px,当本元素和父级元素指定了以em或者百分比为单位的font-size时,则在16px的基础上乘以所有上级fontSize的积. 由这个性质 可以通过设置line-height来代替zoom以达到想要的效果. CSS单位em span{ font-size:16px; } .domain{ padding:15px; } 正常的1em=16px style="font-size:2e

  • document.createElement()用法及注意事项(ff下不兼容)

    今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 复制代码 代码如下: var inputObj    = document.createElement      ("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;' " r

  • ie与ff下的event事件使用介绍

    event是ie自带的一个对象,而ff中不存在该对象,只能通过传递参数的方式来模拟event 另外ie中使用srcElement去获得事件触发源,ff下使用target.因此使用这两个对象时需要做相关的浏览器兼容. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

  • 一个快速添加标签的小玩意，但在FF下不能用，望高手指点

    初步判断是obj.style.backgroundColor在FF下返回的是rgb(xxx,xxx,xxx)的缘故.偶是新手,代码很菜,高手勿笑啊 Untitled Document a.blue:link,a.blue:visited{ font-size: 12px; color: #69c; text-decoration: none; } a.blue:hover{ background: #69c; color: #fff; } function fInsert(a,b){ oInpu

  • ie与ff下的event事件

    更多的文章可以参考 http://www.jb51.net/tag/event/1.htm另外ie中使用srcElement去获得事件触发源,ff下使用target.因此使用这两个对象时需要做相关的浏览器兼容. srcElement --http://www.jb51.net/ 点击 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 查看运行结果 综合上节attachEvent与addEventListener. 复制代码 代码如下: <script type="text/jav

  • 关于onchange事件在IE和FF下的表现及解决方法

    在最近做的一个项目中,有这么一个功能点:页面上有一个checkbox,当用户选择或者取消选择该checkbox时会向后台发一个jsonp请求.当时的实现是为这个checkbox添加一个onchange事件,但结果却出人意料,为此,我深入的研究了一下,发现了onchange事件在IE和FF下的表现存在着以下问题. 问题①:在FF下,当改变checkbox的选中状态时,会马上触发onchange事件.但在IE下改变checkbox的选中状态时,并不会马上出发onchange事件,而是需要等待chec

  • JS在IE和FF下attachEvent,addEventListener学习笔记

    对象名.addEventListener("事件名(不带ON)",函数名,true/false);(FF下) 对象名.attachEvent("事件名",函数名);(IE下) 说明: 事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on". 函数名,记住不要跟括号最后一个参数是个布尔值,表示该事件的

  • FF下 用 col 隐藏表格列的方法详解！

    今天,我在一个有52个字段的报表时,迫使我深入的做了一下研究, 我发现: col在ff下的display 的默认值是:table-column  visibility的默认值为:visible 我又查查了CSS手册,发现 visibility 有一个 collapse的可选值,据说在IE下是没有实现的,IE没实现不竺于FF没有实现,就像FF不支持的不一定IE不支持一样. BT的我,一个一个试了一遍, 终于发现了! FF下可以用下面的方法,用COL把表格的列给隐藏! 欢呼! 复制代码 代码如下:

  • ff下JQuery无法监听input的keyup事件的解决方法

    复制代码 代码如下: $(document).ready(function(){    $('#news_title').bind('input',fun).bind('keyup',fun);}); //function listvar fun=function(){    value=$(this).val();    $('.prev').text(value);} 注: bind('input',fun)  用于ff下keyup bind('keyup',fun) 用于ie

  • IE与FF下javascript获取网页及窗口大小的区别详解

    IE与FF下javascript获取网页及窗口大小的区别详解

    在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别: <script language="javascript">function getInfo(){    var s = "";    s += " 网页可见区域宽:"+ document.body.clientWidth;    s += &qu

随机推荐