Css method in jQuery (1.6.3) to analyze floating implementation Defects

JQuery's css method has two methods of writing in a unified way. You can directly use the float attribute. In the following css method, the parameter "float" can be set or the element's float can be obtained. Copy codeThe Code is as follows: <div id = "d1"> float div </div>
<Script type = "text/javascript">
(('Mongod1'mongo.css ('float', 'right ');
Var str = require ('{d1'{.css ('float ');
Alert (str );
</Script>

However, jQuery has to be self-intelligent, and supports cssFloat and styleFloat. For details, see the API documentation. For example, when obtaining the float attribute of an element, the following is equivalent.
1) ('div.left').css ('float ');
2) ('div.left').css ('cssfloat ');
3) ('div.left').css ('stylefloat ');
However, method 3 returns different values in different browsers. For example, styleFloat is used to obtain floatingCopy codeThe Code is as follows: <div id = "d1"> float div </div>
<Script type = "text/javascript">
Alert((('{d1'{.css ('stylefloat '));
</Script>

Element div is not set to float, so "none" should be returned by default ". But the result is
IE6/7/8: Null String "none" is returned"
IE9/Firefox/Safari/Chrome/Opera: returns an empty string.
Another example is to use cssFloat to set float:Copy codeThe Code is as follows: <div id = "d1"> float div </div>
<Script type = "text/javascript">
(('Mongod1'mongo.css ('cssfloat', 'right ');
</Script>

IE6/7/8: The setting is unsuccessful.
IE9/10/Firefox/Safari/Chrome/Opera: Set successfully
Another example is to use styleFloat to set float:Copy codeThe Code is as follows: <div id = "d1"> float div </div>
<Script type = "text/javascript">
(('Includ1'0000.css ('stylefloat', 'right ');
</Script>

IE6/7/8/9/10/Opera: Set successfully (Opera is a freak, styleFloat and cssFloat Support)
Firefox/Safari/Chrome: the setting fails.
Therefore, float is honestly used to avoid differences between browsers when css is used to retrieve or set float. Do not use styleFloat or cssFloat.
Of course, if this is a jQuery bug, it is easy to fix it.
1. Modify the jquery.css method and add a styleFloat judgment.Copy codeThe Code is as follows: // cssFloat needs a special treatment
If (name = "cssFloat" | name = "styleFloat "){
Name = "float ";
}

This example uses examples (xx).css ("styleFloat"), so there is no compatibility problem.
2. Modify the jQuery. style method and add a judgment. If styleFloat or cssFloat is passed to floatCopy codeThe Code is as follows: // Don't set styles on text and comment nodes
If (! Elem | elem. nodeType = 3 | elem. nodeType = 8 |! Elem. style ){
Return;
}
// This is the fix code added.
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.css Hooks [origName];

In this example, the browsers (xx).css ("cssFloat", "right") or (xx).css ("styleFloat", "right") are OK.