設置元素浮動的幾種方式

設置元素浮動的幾種方式

咱們知道獲取元素的浮動屬性，各瀏覽器中使用的屬性不一樣。你們都知道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