jQuery(1.6.3) 中css方法對浮動的實現缺陷

JavaScript中設定元素的浮動屬性（float），標準瀏覽器使用cssFloat，IE舊版本使用styleFloat。

jQuery的css方法統一了兩種寫法，直接使用float屬性即可，如下css方法中傳參數“float”即可以設定也可以擷取元素的float。

<div id="d1">float div</div><script type="text/javascript">$('#d1').css('float', 'right');var str = $('#d1').css('float');alert(str);</script>

但jQuery非要自作聰明，加上對cssFloat和styleFloat的支援，見API文檔，比如擷取元素的float屬性時，以下是等價的。

1 $('div.left').css('float');

2 $('div.left').css('cssFloat');

3 $('div.left').css('styleFloat');

但方式3在各個瀏覽器中傳回值不同，比如使用styleFloat擷取浮動

<div id="d1">float div</div><script type="text/javascript">alert($('#d1').css('styleFloat'));</script>

元素div沒有設定浮動，因此預設應該返回“none”。但結果是

IE6/7/8 : 返回Null 字元串"none"

IE9/Firefox/Safari/Chrome/Opera : 返回Null 字元串

又如使用cssFloat設定浮動：

<div id="d1">float div</div><script type="text/javascript">$('#d1').css('cssFloat', 'right');</script>

IE6/7/8：設定未成功

IE9/10/Firefox/Safari/Chrome/Opera：設定成功

又如使用styleFloat設定浮動：

<div id="d1">float div</div><script type="text/javascript">$('#d1').css('styleFloat', 'right');</script>

IE6/7/8/9/10/Opera：設定成功（Opera是個怪胎，styleFloat和cssFloat都支援）

Firefox/Safari/Chrome：設定不成功

因此，使用css方法擷取或設定浮動時為避免各瀏覽器差異還是老老實實的使用float。不要使用styleFloat或cssFloat。

當然如果這算jQuery的bug，那麼修複也是很容易的

1，修改jQuery.css方法，加個styleFloat的判斷。

// cssFloat needs a special treatmentif ( name === "cssFloat" || name === "styleFloat") {name = "float";}

這樣使用$(xx).css("styleFloat") 就沒有相容性問題了。

2，修改jQuery.style方法，加個判斷如果傳styleFloat或cssFloat都轉成float

// Don't set styles on text and comment nodesif ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {return;}// 這是加的修複代碼if( name === "cssFloat" || name === "styleFloat" ) {name = "float"}// Make sure that we're working with the right namevar ret, type, origName = jQuery.camelCase( name ),style = elem.style, hooks = jQuery.cssHooks[ origName ];

這樣使用$(xx).css("cssFloat", "right") 或 $(xx).css("styleFloat", "right") 各瀏覽器就都ok了。