IE兼容问题解决根源:深刻理解hasLayout属性,原理与使用方法
2011-09-23 09:39
661 查看
解决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%”的方法已经不再适用了。
这些诡异的问题往往大部分和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%”的方法已经不再适用了。
相关文章推荐
- IE兼容问题解决根源:深刻理解hasLayout属性,原理与使用方法
- IE兼容问题解决根源:深刻理解hasLayout属性,原理与使用方法
- IE下CSS属性float:right下换行问题解决方法
- JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
- 完美解决IE兼容模式问题(使IE使用固定的渲染模式)
- min-height 属性的使用以及IE6.0不兼容问题的解决办法
- JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
- android TextView多行文本(超过3行)使用ellipsize="end"属性无效问题的解决方法
- 使用Google Chrome Frame(谷歌浏览器内嵌框架)解决低版本IE不兼容问题
- springMVC框架在js中使用window.location.href请求url时IE不兼容问题解决
- setAttribute()的使用方法与ie不兼容onclick事件解决方法
- 一个页面中使用多个iframe导致在ie中假死问题的解决方法
- 原型扩展的方法解决IE和Firefox的Js兼容问题
- 使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
- JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
- springMVC框架在js中使用window.location.href请求url时IE不兼容问题解决
- 常见浏览器兼容问题及相关解决方法(chrome/IE/firefox)
- vista sp1 使用迅雷后ie问题(解决方法)
- setAttribute()的使用方法与ie不兼容onclick事件解决方法
- DIV+CSS布局在IE和firefox中常见不兼容问题及解决方法