当前位置: 代码迷 >> Web前端 >> 设立元素浮动的几种方式
  详细解决方案

设立元素浮动的几种方式

热度:77   发布时间:2012-09-03 09:48:39.0
设置元素浮动的几种方式

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

<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下也可以获取,如下

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

?

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

<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
  相关解决方案