IE zoom
zoom是IE浏览器特有的属性,它可以设置或检索对象的缩放比例(它的中文解释是:放大),它的作用通常可以概括为三个方面:
1、hasLayout
2、清除浮动
3、清除div的垂直外边距合并问题
什么是hasLayout?
hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时,它负责对自己和可能的后代元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。下列元素默认 hasLayout=true
<img> <input> <select> <textarea> <button>
很多情况下,我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。
hasLayout属性不能直接设定,你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout的一些CSS属性值。
————————————-
display
启动haslayout的值:inline-block
取消hasLayout的值:其他值
————————————–
width/height
启动hasLayout的值:除了auto以外的值
取消hasLayout的值:auto
—————————————
position
启动hasLayout的值:absolute
取消hasLayout的值:static
—————————————-
float
启动hasLayout的值:left或right
取消hasLayout的值:none
—————————————
zoom
启动hasLayout的值:有值
取消hasLayout的值:narmal或者空值
(zoom是微软IE专有属性,可以触发hasLayout但不会影响页面的显示效果。zoom: 1常用来除错,不过 ie 5 对这个属性不支持。)
—————————————-
writing-mode: tb-rl
这也是微软专有的属性。
ie7还有一些额外的属性可以触发该属性(不完全列表):
min-height: (任何值)
max-height: (任何值除了none)
min-width: (任何值)
max-width: (任何值除了none)
overflow: (任何值除了visible)
overflow-x: (任何值除了visible)
overflow-y: (任何值除了visible)
position: fixed
因元素hasLayout而导致的问题其实一般都很容易发现:往往是内容出现错位甚至完全不可见。举一个典型例子,当一个元素内含浮动或绝对定位的内容时,它通常会表现出奇怪和错误的行为,看下面的代码:
<div id=”nofloatbox”>
<div id=”floatbox”></div>
</div>
CSS代码如下:
#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
}
#floatbox {
float: left;
width: 100px;
height: 100px;
border: 1px solid #0000FF;
background: #00FF00;
}
ie显示结果如下图:
可见无浮动的div并没有被里面的浮动元素的高度撑开,其高度并不会自动计算。我们下面再给这个无浮动的div加上个zoom:1;来触发其hasLayout属性试试,css代码如下:
#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
zoom:1;
}
#floatbox {
float: left;
width: 100px;
height: 100px;
border: 1px solid #0000FF;
background: #00FF00;
}
保存刷新ie浏览器窗口,如下图:
可见这次外围容器的高度被撑起来了。达到清除浮动的效果。
同样,设定上文所述的其他会触发hasLayout的css属性都会得到这个结果。
通常firefox等标准的遵守浏览器可以加上overflow: hidden;来解决,而IE则不行,需要触发其hasLayout属性才可以。
hasLayout对于内联元素也可以有效果,当内联元素的hasLayout为true的时候,可以给这个内联元素设定高度和宽度并得到期望的效果。如下例:
代码:
<p>今天的<span style=”width: 100px; height: 50px; background: #DDD;”>天气</span>真好</p>
效果如下图所示:
今天的天气真好
认识hasLayout——IE浏览器css bug的一大罪恶根源
下面给span加上zoom: 1;来触发hasLayout:
<p>今天的<span style=”width: 100px; height: 50px; background: #DDD; zoom: 1;”>天气</span>真好</p>
这回的效果如下图所示:
要注意的是,hasLayout是微软专有的东西,对firefox等比较遵守标准的浏览器就无效了,因此不可太过依赖。貌似现在的IE8就已经不用特意去触发hasLayout就可以得到和firefox一致的效果,不知ie8是否已经弃用这个属性了?
其实依据合理的语义化,恰当的文档流,正确的标准化所生产出来的页面,在各个公司出品的标准渲染的浏览器下,一般并不会存在太多兼容性的问题的。
一般如果是因为layout而引起的显示不符期望效果的话,在ff下会表现正常,而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的haslayout属性,通常可以通过加上zoom: 1;来调试。直到找到了产生问题的元素,再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是,有时不便指定尺寸属性的情况下,就只能寻找替代方案了。对于ie7 ,最好的办法是设置最小高度属性为0;这个技术是无害的,因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%,然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly hack。
(转载网址http://neverned.blog.163.com/blog/static/1265524200933021130561/)
IE zoom的更多相关文章
- Nike Zoom Winflo 2 Kvinder Sko Når jeg set elementet
De fleste af os elskede denne Nike Pegasus 34 foruden var ved at blive begejstret for at få dine ben ...
- css zoom属性兼容ie,firefox,chrome
jquery代码: $("body").css({ "zoom":"2", "transform":"scal ...
- Selenium通过WebDriver控制IE浏览器出错 Browser zoom level was set to 109%. It should be set to 100%
错误信息: WebDriverException: Message: Unexpected error launching Internet Explorer. Browser zoom level ...
- 关于scale和zoom的区别
其实关于scale,我之前是用他来搞一些css3的特效的放大缩小啊,玩的也挺6666,而*zoom:1之前是用来做css的hack,也就是触发IE6/7的haslayout清除浮动的.终于某天,好事的 ...
- [WPF系列]-Deep Zoom
参考 Deep Zoom in Silverlight
- CSS中不为人知Zoom属性的使用介绍(IE私有属性)
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...
- zoom在css中的作用
zoom:1 zoom:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持.它可以设置或检索对象的缩放比例. 兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来 ...
- zoom和transform:scale的区别
小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...
- d3 API zoom
常用的看明白了,还有几个地方不太明白. zoom函数: area path circle .on("zoom", function(){ that.svg_obj.select(& ...
随机推荐
- 如何写Markdown格式文档
Markdown Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯.它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档.这种语言吸收了很多在电子邮件中 ...
- 微信小程序表单验证(WxValidate使用)
参考博客: https://www.cnblogs.com/zhangxiaoyong/p/10166951.html https://github.com/wux-weapp/wx-extend/b ...
- CF578D题解
LCS 为给定串的长度减一,考虑枚举一个区间 \([L,R]\),表示 \(S\) 和 \(T\) 的长度为 \(L-1\) 的前缀完全相同以及长度为 \(n-R\) 的后缀完全相同,且没有比这个前缀 ...
- Android 12(S) 图形显示系统 - BufferQueue的工作流程(十)
题外话 疫情隔离在家,周末还在努力学习的我 ..... 一.前言 上一篇文章中,有基本讲清楚Producer一端的处理逻辑,最后也留下了一个疑问: Consumer是什么时候来消费数据的?他是自己主 ...
- QQ密码防盗5招
第一招:复制粘贴防木马 每次登录QQ前,新建一个文本文件,并键入密码后复制,关闭文本文件后(不要保存)打开QQ,用"Ctrl+V"把密码粘贴到密码栏里,这样可以防范绝大部分的QQ木 ...
- 移动IP通信过程
看了点资料,沿着自己的思路来整理一下计算机网络部分移动IP通信遇到的问题以及是怎样解决的.如有错误,欢迎纠正! 遇到问题,然后解决问题. 沿着这样一个思路我们可以看看移动IP通信和传统的网络通信有什么 ...
- Pulsar 也会重复消费?
背景 许久没有分享 Java 相关的问题排查了,最近帮同事一起排查了一个问题: 在使用 Pulsar 消费时,发生了同一条消息反复消费的情况. 排查 当他告诉我这个现象的时候我就持怀疑态度,根据之前使 ...
- 什么是CPI
请参考这篇博客,很全面的解释了CPI https://www.cnblogs.com/diegodu/p/9366639.html
- session 会话机制以及变量覆盖
session会话机制介绍如下 http是无状态协议.服务器靠cookie和session来记住用户.$_SESSION 和 $_GET等一样,是超全局变量. 后台脚本里面会写: session() ...
- EasyExcel完成excel文件的导入导出
简介 常见的Excel分析框架有Apache poi 和EasyExcel, poi在另一篇已经介绍过了,详情可以看[https://www.cnblogs.com/jasmine-e/p/16064 ...