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

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 treatment
if ( name === "cssFloat" || name === "styleFloat") {
name = "float";
}

這樣使用$(xx).css("styleFloat") 就沒有相容性問題了。
2，修改jQuery.style方法，加個判斷如果傳styleFloat或cssFloat都轉成float 複製代碼 代碼如下:// Don't set styles on text and comment nodes
if ( !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 name
var ret, type, origName = jQuery.camelCase( name ),
style = elem.style, hooks = jQuery.cssHooks[ origName ];

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