<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> //#foo{display:inline-block;} #pwd{float:left;float:none} </style> <script type="text/javascript"> window.onload = function () { var foo = document.getElementById("foo"); var pwd = document.getElementById("pwd"); //foo.currentStyle.hasLayout = true; //foo.currentStyle.hasLayout = false; //foo.currentStyle.hasLayout = 0; //foo.currentStyle.hasLayout = -1; //不管设置的是上面的哪一个值,ie6都会提示错误:无效的过程调用和参数,由此证明hasLayout属性是不可直接访问的,但是可以通过设置其他css属性来间接设置hasLayout的值 //alert(foo.currentStyle.hasLayout) //#pwd因为是默认haslayout = true 的元素(input),因此设置如何其他属性都将无法设置haslayout为false alert(pwd.currentStyle.hasLayout) } </script> </head> <body> 密码<input type="password" name="pwd" id="pwd" /> <div id="foo" >你好的呀</div> </body> </html>
总结:
1、hasLayout这个ie特有的css属性,不允许直接设置。我使用了style="hasLayout:false/true"(无效) 和 element.currentStyle.hasLayout = false/true(报错:无效的过程调用和参数) 这两种方式来进行测试。
2、当元素本身默认的hasLayout为false时,我们可以设置某些css属性来间接设置hasLayout = true,同时我们也可以设置对css触发属性的删除或重写来重新设置hasLayout = false。
3、当元素本身默认的hasLayout为true时,hasLayout无法被直接或间接设置。理由:测试使用了input元素,我在ie developer toolbar中并没有发现默认触发 hasLayout的相关属性,因此删除或重新css属性把hasLayout设置为false这种想法就无从说起。
附:
Internet Explorer 6、7 触发hasLayout完全列表:
* float: (left 或 right)
* position: absolute
* display: inline-block
* zoom: (除 normal 外任意值)
* width: (任何值除了auto)
* height: (任何值除了auto)
* writing-mode: tb-rl
Internet Explorer 7触发hasLayout不完全列表:
* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed
默认hasLayout为true(-1)的html标签:
* body and html
* table, tr, th, td
* input, button, file, select, textarea, fieldset
* img
* hr
* marquee
* frameset, frame, iframe
* objects, applets, embed