IE兼容问题解决根源:深刻理解hasLayout属性,原理与使用方法
2012-06-10 10:39
711 查看
解决IE兼容问题是比较头疼的问题,无论你是新入门的菜鸟还是久经考验的职业行家,兼容问题,特别是IE,IE6会让你非常头疼。很多时候,div CSS在IE下的解析十分奇怪,一个比较经典的bug就是设置border的时候,有时候border会断开,刷新页面或者滚动滚动条的时候,断掉的部分又会连接起来。这些问题的根源很多时候来源于IE的一个特有属性:hasLayout。hasLayout是一个非常有意思的学术研究,如何深刻理解hasLayout属性,及他的使用方法,原理,解决IE的兼容问题非常有用处,下面来讲解一下hasLayout的属性,原理与使用方法。
这些诡异的问题往往大部分和IE下一个神秘的属性相关——hasLayout。hasLayout是IE浏览器专有的一个属性,用于CSS的解析引擎。有时候在IE下一些复杂的CSS设置解析起来会出现bug,其原因可能与hasLayout没有被自动触发有关,我们通过一些技巧,手动触发hasLayout属性就可以解决Bug了。这也算是针对IE下疑难杂症的特殊偏方了,很多时候,触发了hasLayout就可以药到病除了。
hasLayout的触发方法有很多种,例如设置width,height值,设置position为relative等。但如果设置了width,height,或position都会在触发hasLayout的同时带来一些副作用的。早期的一些工程师推荐使用“height:1%”来触发hasLayout,那时还没有出现IE7,而height属性在IE6下其实是按照"min-height"来解析的,所以只要对IE6进行hack,"* html{height:1%}"就可以触发hasLayout,同时又不带来副作用了。后来出现的IE7仍然存在很多hasLayout的问题,但IE7已经能够正确识别height属性了,“height:1%”的方法已经不再适用了。
于是,一个更好的解决方法开始流行,它使用了一个生僻的CSS属性zoom来触发hasLayout——"zoom:1"。使用"zoom:1"可以触发hasLayout,并且不会像height等属性一样引入副作用,更妙的是,我们可以不用CSS
hack了。但"zoom:1"并不是一定可以触发hasLayout的。在极少数特殊的情况下,例如非常复杂的CSS设置,特别是使用DHTML的时候,使用"zoom:1"有时候也会无效,这时,我们可能需要借助更强大的"position:relative"来帮助触发hasLayout。总之,”zoom“是最常用,最安全,成本最少的触发hasLayout的方式,一般情况下,使用它就完全可以触发hasLayout了。如果遇到特殊情况,"zoom:1"无效的情况下,我们可以通过设置"position:relative"来触发hasLayout,尽管它会带来一点副作用。
值得强调的是,hasLayout的设计初衷是用于辅助块级元素的盒模型解析的,它是用于块级元素的。如果用于行内元素,会引发一些特殊的效果,就会让行内元素拥有一些块级元素的特性。
如:display:inline-block;它是行内的块级元素,它拥有块级元素的特点,可以设置长宽,可以设置margin和padding值,但它却不是独占一行的,它的宽度并不占满父元素,而是和行内元素一样,可以和其他行内元素排在同一行里。它集块级元素和行内元素的特点于一身,是个非常有用的display类型。
以上是hasLayout属性,原理与使用方法总结讲解一下,对于解决IE兼容问题帮助很大的,同学在平时做div+css的时候,要注意一下。
这些诡异的问题往往大部分和IE下一个神秘的属性相关——hasLayout。hasLayout是IE浏览器专有的一个属性,用于CSS的解析引擎。有时候在IE下一些复杂的CSS设置解析起来会出现bug,其原因可能与hasLayout没有被自动触发有关,我们通过一些技巧,手动触发hasLayout属性就可以解决Bug了。这也算是针对IE下疑难杂症的特殊偏方了,很多时候,触发了hasLayout就可以药到病除了。
hasLayout的触发方法有很多种,例如设置width,height值,设置position为relative等。但如果设置了width,height,或position都会在触发hasLayout的同时带来一些副作用的。早期的一些工程师推荐使用“height:1%”来触发hasLayout,那时还没有出现IE7,而height属性在IE6下其实是按照"min-height"来解析的,所以只要对IE6进行hack,"* html{height:1%}"就可以触发hasLayout,同时又不带来副作用了。后来出现的IE7仍然存在很多hasLayout的问题,但IE7已经能够正确识别height属性了,“height:1%”的方法已经不再适用了。
于是,一个更好的解决方法开始流行,它使用了一个生僻的CSS属性zoom来触发hasLayout——"zoom:1"。使用"zoom:1"可以触发hasLayout,并且不会像height等属性一样引入副作用,更妙的是,我们可以不用CSS
hack了。但"zoom:1"并不是一定可以触发hasLayout的。在极少数特殊的情况下,例如非常复杂的CSS设置,特别是使用DHTML的时候,使用"zoom:1"有时候也会无效,这时,我们可能需要借助更强大的"position:relative"来帮助触发hasLayout。总之,”zoom“是最常用,最安全,成本最少的触发hasLayout的方式,一般情况下,使用它就完全可以触发hasLayout了。如果遇到特殊情况,"zoom:1"无效的情况下,我们可以通过设置"position:relative"来触发hasLayout,尽管它会带来一点副作用。
值得强调的是,hasLayout的设计初衷是用于辅助块级元素的盒模型解析的,它是用于块级元素的。如果用于行内元素,会引发一些特殊的效果,就会让行内元素拥有一些块级元素的特性。
如:display:inline-block;它是行内的块级元素,它拥有块级元素的特点,可以设置长宽,可以设置margin和padding值,但它却不是独占一行的,它的宽度并不占满父元素,而是和行内元素一样,可以和其他行内元素排在同一行里。它集块级元素和行内元素的特点于一身,是个非常有用的display类型。
以上是hasLayout属性,原理与使用方法总结讲解一下,对于解决IE兼容问题帮助很大的,同学在平时做div+css的时候,要注意一下。
相关文章推荐
- IE兼容问题解决根源:深刻理解hasLayout属性,原理与使用方法
- IE兼容问题解决根源:深刻理解hasLayout属性,原理与使用方法
- python爬虫,selenium使用,Firefox-chrome-IE问题解决方法,selenium的基本操作
- JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结 【转】http://blog.csdn.net/uniqer/article/details/7789104
- android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法
- JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
- android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法
- mysql导入导出数据中文乱码解决方法小结(1、navicat导入问题已解决,创建连接后修改连接属性,选择高级->将使用Mysql字符集复选框去掉,下拉框选择GBK->导入sql文件OK;2、phpmyadmin显示乱码的问题也解决,两步:1.将sql文件以utf8的字符集编码另存,2.将文件中sql语句中的字段字符集编码改成utf8,导入OK)
- 【CSS提升】理解IE渲染引擎的haslayout属性——据此解决IE下大部分的bug
- 使用 jquery-autocomplete插件 完成文本框输入自动填充联想效果 解决兼容IE输入中文问题
- inline-block和text-indent在IE6,IE7下同时使用的兼容问题解决方法
- SCRIPT65535: 意外地调用了方法或属性访问(ie不兼容解决办法)
- JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
- JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
- JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
- 采用Window对象shim属性解决IE下flash位于弹出窗口之上遮住窗口问题——此方法对firefox暂未解决
- 使用Google Chrome Frame(谷歌浏览器内嵌框架)解决低版本IE不兼容问题
- android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法
- Struts2中使用OGNL表达式语言访问静态方法和静态属性以及我遇到的问题和解决方法
- Struts 2 使用属性模型取checkbox 值出现问题解决方法。