zoom 和 scale

一、什么是 haslayout 属性?

haslayout 是微软 Windows Internet Explorer 渲染引擎的一个内部组成部分。在 Internet Explorer 中,会使用布局的概念来定位元素的尺寸和位置。

但是这样在 ie 中会导致很大的性能问题,ie 团队为了减少性能的开销,决定将布局只应用在需要它们的元素上。

也就是说默认情况下,每个元素都应该有它自己的样式,但是在ie中有些元素的样式并没有激发出来,所以 ie 浏览器的 bug 很多。对于这些 bug ,只要我们将他的 haslayou 属性激发出来,就可以解决了。

haslayout 有两个属性值 truefalse,为 true的时候haslayout 被激发,我们就可以说这个元素有一个布局。当一个元素有布局的时候,它就负责对自己和子孙元素进行尺寸的计算和定位。haslayout 为只读属性,一旦触发就不可逆转

scale 元素以自己的中心为基点做缩放

scale 是先布局后变换的,变换不会对布局产生影响

zoom 先缩放,后计算布局

二、区别

zoom 缩放会将元素保持在左上角,而 scale 默认是中间位置

zoom 在非 IE 浏览器中表现为支持放大或者缩小

三、作用

检查页面的标签是否闭合

触发IE浏览器的 haslayout ,解决 ie 下的浮动

检查 IE 下是否触发 haslayout

解决 ie 下的浮动,margin 重叠问题

四、兼容问题

火狐浏览器不支持 zoom 属性,但是在 webkit 内核浏览器中zoom 这个属性也是可以被支持的

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,642评论 1 45
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,606评论 0 7
  • 前端开发知识点 HTML&CSS对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型...
    Hebborn_hb阅读 851评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 前端面试集锦(转载) 转载地址:前端开发面试题 以下皆为转载 前端开发知识点: 作为一名前端工程师,无论工作年头长...
    cuikangjie阅读 465评论 0 2