设置元素浮动的几种方式

设置元素浮动的几种方式

我们知道获取元素的浮动属性，各浏览器中使用的属性不同。大家都知道IE中使用styleFloat，标准浏览器使用cssFloat。

1 2 3 4 5 6 7 8 9 10

<div>test</div> <script>     var div = document.getElementsByTagName('div')[0];     // IE     div.currentStyle.styleFloat; // none           // FF/Chrome/Safari/Opera     var sty = window.getComputedStyle(div, null);     sty.cssFloat; // none </script>

至于为什么不直接使用float大家应该很清楚，float是ECMAScript的保留字。

 

看jq源码中意外发现IE中使用“float”属性在IE9下也可以获取，如下

1 2 3 4 5 6 7

<div>test</div> <script>     var div = document.getElementsByTagName('div')[0];           // IE9     alert(div.currentStyle['float']); // none </script>

IE6/7/8则是undefined。webkit 也支持float属性，如下

1 2 3 4 5 6 7 8

<div>test</div> <script>     var div = document.getElementsByTagName('div')[0];           // Chrome/Safari     var sty = window.getComputedStyle(div, null);     alert(sty['float']); // none </script>

 

 

以下列举下各浏览器对float，cssFloat，styleFloat的支持情况

	IE6/7/8	IE9	Firefox	Safari	Chrome	Opera
styleFloat	Y	Y	N	N	N	Y
cssFloat	N	Y	Y	Y	Y	Y
float	N	Y	N	Y	Y	N