• zoom:1的常见作用


    zoom:1的常见作用

    一、总结

    一句话总结:

    通常,在给低版本的IE做兼容的时候会用到zoom:1;---比如zoom:1;解决ie6中不支持after伪类解决float高度坍塌

    例如,清除浮动的时候,我们会这么写.clearfix::after{content: ".";clear: both;display: block;visibility: hidden;overflow: hidden;height: 0;*zoom:1}
    为了防止低版本的IE浏览器不支持after选择器或者某些属性,在最后加上zoom:1来清除浮动。

    二、zoom:1的常见作用

    转自或参考:zoom:1的常见作用
    https://www.cnblogs.com/meierbao/p/6526247.html

    zoom是IE专用属性,firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例,但这作用几乎用不到。

    可以让网页实现IE7中的放大缩小功能。比如你想让你的网页缩小为原来的一半,那么就在body中加入style="zoom:0.5"

     

    设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题。

     

    通常,当浮动子元素导致父元素塌陷的时候,只要给父元素加上overflow: hidden;来解决,但是对于IE不行,需要触发其hasLayout属性才可以。 

     

    zoom:1就是IE6 专用的 触发 haslayout 属性的。hasLayout是IE特有的一个属性。很多的IE下的css bug都与其息息相关。在IE中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算和定位。

    hasLayout对于内联元素也可以有效果,当内联元素的hasLayout为true的时候,可以给这个内联元素设定高度和宽度并得到期望的效果。具体关于hasLayout的知识点,可以另外搜索。

     

    通常,在给低版本的IE做兼容的时候会用到zoom:1。例如,清除浮动的时候,我们会这么写

    .clearfix::after{content: ".";clear: both;display: block;visibility: hidden;overflow: hidden;height: 0;*zoom:1}

    为了防止低版本的IE浏览器不支持after选择器或者某些属性,在最后加上zoom:1来清除浮动。

     

    为了实现inline-block的兼容的时候,我们会这么写:{display: inline-block;*display:inline;*zoom:1;}因为在IE6、IE7下,只有设置在默认显示方式为inline的元素上才会生效。前面说过,当内联元素的hasLayout为true的时候,可以给这个内联元素设定高度和宽度并得到期望的效果,所以这样做可以达到兼容inline-block的效果。

    这里还要补充一点,为什么*display:inline;*zoom:1;前面有*,*放在css属性前面,表示这个属性仅仅应用到Internet Explorer 7 以及以下版本。因为Internet Explorer 版本 7 以及以下承认非字母数字(除了下划线)前缀的属性。所以这里,IE7以上的版本作用的是display: inline-block;而在IE7及以下的版本中作用的是display:inline;zoom:1。

     
     
    zoom:1;解决ie6中不支持after伪类解决float高度坍塌
     
     
     
  • 相关阅读:
    SSO单点登录机制
    Web应用中Service层获取request对象 | RequestContextHolder的使用
    J2EE中数据字典的使用详解
    Redis高级(事务,持久化,主从复制读写分离,以及安全设置)
    Redis的五种数据类性以及对应的操作命令
    Redis客户端与基本命令
    VMware15安装CentOS8
    用内置的库turtle来画一朵花,python3
    python之经典猜数字
    python,寻找班级里面名字最长的人
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12255872.html
Copyright © 2020-2023  润新知