zoukankan      html  css  js  c++  java
  • 关于"zoom“ 的一点小认识

    最早接触zoom是在清除浮动的时候,原因就是zoom能触发IE的haslayout,当时也没深究其原理,今天,在查看张鑫旭的对overflow与zoom”清除浮动”的一些认识时,其中提到zoom是比例缩放,比较诧异,遂去查找资料(可惜,中文全介绍它是IE私有属性,用于清除浮动,人云亦云,造成就这一个简陋的版本可查询),发现其中大有乾坤,记下测试过程,其中有错误的,望大家指正,也希望大家去研究下这个东西,不能总是说它就能清除个浮动,是IE私有的……

     一.zoom原本是IE的私有属性,但谷歌,opera,safari也是支持它的(火狐到现在的版本也不支持它),只不过其中有一些差异,容我后面道来

      (截图来自:http://www.browsersupport.net/CSS/zoom

     二.zoom在各浏览器不同的差异表现

     1. zoom就是缩放属性,没有继承,它是非标准的,它是不被推荐的(在W3CHTML上,它被写成css3 zoom属性,但我去w3c官网上没找到,不知道是我找错了地方还是别人,望有人找到知会我一下,不胜感谢)其语法如下:

         zoom: normal | <number> | <percentage>  

       2.支持的浏览器对于zoom有两种不同的表现,一种是以chrome opera safari为主的现在标准浏览器(以下称标准浏览器),另一种是IE为主的浏览器(以下称ie)

        注:(block与inline-block类的元素 统称为block类,inline类的元素统称为inline类,测试代码全在jsfiddle.net   测试代码地址:上,有兴趣的可以看看,我只截图敲结果)

       a: 一个block类元素,给它加一个样式,zoom: 2

         IE中不会去缩放当前block类元素(本身)的margin,定位中的top,left值,padding,其余的都会缩放,比如width,height,font-size,line-height等

        标准浏览器中则会缩放margin,定位中的top,left,但也不会缩放padding,这个值,

       截图如下:  

        标准浏览器与ie对block类元素内部的所有元素属性都会进行缩放,(不包括padding)

      b.针对内联元素,标准浏览器zoom有效,但IE8及以上的IE浏览器不支持这个属性,其余表现和它们各自阵营的表现一样,

        如果想要IE8以上的内联元素也支持zoom,可以把内联元素转换成block类元素,或者,给它加个属性position: absolute,加不加top,left都一样,

      c.  标准浏览器中的zoom加一个值  reset,相当于在一个有zoom的元素中不进行缩放

       

      表述不清,望大家都自己做下实验。。。。,关于它的应用及与transforms的区别,有待进一步研究

        

         资料引用:zoom介绍(翻墙吧,骚年!!)

         资料引用:zoom的浏览器支持

           

       

  • 相关阅读:
    k8s笔记0528-基于KUBERNETES构建企业容器云手动部署集群记录-4
    k8s笔记0528-基于KUBERNETES构建企业容器云手动部署集群记录-2
    Mysql索引最佳实践笔记0524
    Mysql 5.6 编译报错
    MySQL 源码安装规范
    CentOS 7.3安装Zabbix3.2
    Mysql for Mac 安装及环境配置
    win10下Resin安装--入门(1)
    React---入门(1)
    SVN简介与安装
  • 原文地址:https://www.cnblogs.com/fsy0718/p/3230148.html
Copyright © 2011-2022 走看看