关于设置input_checbox大小的方法(兼容问题)

给input_checkbox设置样式width和height大小在IE8+,chrome,safari以及安卓和苹果手机上都能显示设置的大小,但在Firefox和欧朋浏览器中是展示不了设置的大小。

再次补充一下浏览器内核知识:首先是四大浏览器。

1.IE:Trident;

2.firefox:Gecko;

3.chrome,safari:webkit;

4.欧朋:03年开始使用presto。但现在已经改用google  chrome的blink内核。

其次是国内的浏览,国内的大多流行浏览器均采用webkit和Trident混合开发的内核,所以如果兼容chrome和IE浏览器的情况下,国内的浏览器也均支持。 

方法一:zoom(在火狐下不生效)

zoom接受三个参数:normal,number, percentage。normal:实际的尺寸。number:用数值表示元素的缩放大小,不能用负值。percentage:用百分比表示元素的缩放大小。

<input type="checkbox" style="zoom:3"/>

如上这是即可将元素放大三倍,但火狐浏览器不支持zoom属性,所以在火狐浏览器下并不生效。即该方法不支持Gecko内核。

注意点:zoom为缩放属性,但使用zoom缩放元素时,其相应的盒模型的各个值均进行缩放。所以需要注意元素的排版位置。


方法二:transform

style样式:

input[type=checkbox]{
                -moz-transform:scale(3);             火狐浏览器
                -ms-transform:scale(3);              IE浏览器
                -webkit-transform:scale(3);        chrome和safair
                -o-transform:scale(3);                  欧朋浏览器
            }

html:

<input type="checkbox" style="zoom:3"/>

以上方法也可以将input_checkbox放大三倍,支持所有浏览器。

注意点:元素缩放是已元素中心为缩放基点的,所欲需要注意元素的排版位置。


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值