CSS method floating implementation defects in jquery (1.6.3)

Set float of elements in Javascript. standard browsers use cssfloat, and earlier ie versions use stylefloat.

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.

 
<Div id = "d1"> float Div </div> <SCRIPT type = "text/JavaScript"> comment ('mongod1'mongo.css ('float', 'right '); vaR STR = ('mongod1'mongo.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 floating

 
<Div id = "d1"> float Div </div> <SCRIPT type = "text/JavaScript"> alert('character d1'character .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:

 
<Div id = "d1"> float Div </div> <SCRIPT type = "text/JavaScript"> comment ('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:

<Div id = "d1"> float Div </div> <SCRIPT type = "text/JavaScript"> comment ('character d1'character .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, when CSS is used to retrieve or set the floatHonestly Using 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.

 
// Cssfloat needs a special treatmentif (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 float

// Don't set styles on text and comment nodesif (! ELEM | ELEM. nodetype = 3 | ELEM. nodetype = 8 |! ELEM. Style) {return;} // This is a fix.CodeIf (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.css hooks [origname];
 

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