CSS基础 —— 恶补zoom:1的原理和应用

zoom的作用是设置或检索对象的缩放比例

CSS基础 —— 恶补zoom:1的原理和应用_第1张图片

设置body的zoom属性,可以实现网页缩小为原来的一半。

body {
  zoom: 0.5
}

设置zoom:1可以在低版本IE下触发IE浏览器的haslayout,用于清除浮动,解决margin导致的重叠等问题

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

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

hasLayout对于内联元素也可以有效果,当内联元素的hasLayout为true的时候,可以给这个内联元素设定高度和宽度并得到期望的效果。

通常,在给低版本(IE6、7)的IE做兼容的时候会用到zoom:1。

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

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

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

{ display: inline-block; *display: inline; *zoom: 1; }

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

参考:

css中在什么情况下要使用zoom:1这个属性呢?

zoom:1的作用

haslayout详解

你可能感兴趣的:(前端开发,-,CSS,/,CSS3)