jQuery(1.6.3) 中css方法对浮动的实现缺陷
来源:互联网 发布:pp助手 mac打不开 编辑:程序博客网 时间:2024/05/19 01:30
JavaScript中设置元素的浮动属性(float),标准浏览器使用cssFloat,IE旧版本使用styleFloat。
jQuery的css方法统一了两种写法,直接使用float属性即可,如下css方法中传参数“float”即可以设置也可以获取元素的float。
1
<
div
id
=
"d1"
>float div</
div
>
2
<
script
type
=
"text/javascript"
>
3
$('#d1').css('float', 'right');
4
var str = $('#d1').css('float');
5
alert(str);
6
</
script
>
但jQuery非要自作聪明,加上对cssFloat和styleFloat的支持,见API文档,比如获取元素的float属性时,以下是等价的。
1 $('div.left').css('float');
2 $('div.left').css('cssFloat');
3 $('div.left').css('styleFloat');
但方式3在各个浏览器中返回值不同,比如使用styleFloat获取浮动
1
<
div
id
=
"d1"
>float div</
div
>
2
<
script
type
=
"text/javascript"
>
3
alert($('#d1').css('styleFloat'));
4
</
script
>
元素div没有设置浮动,因此默认应该返回“none”。但结果是
IE6/7/8 : 返回空字符串"none"
IE9/Firefox/Safari/Chrome/Opera : 返回空字符串
又如使用cssFloat设置浮动:
1
<
div
id
=
"d1"
>float div</
div
>
2
<
script
type
=
"text/javascript"
>
3
$('#d1').css('cssFloat', 'right');
4
</
script
>
IE6/7/8:设置未成功
IE9/10/Firefox/Safari/Chrome/Opera:设置成功
又如使用styleFloat设置浮动:
1
<
div
id
=
"d1"
>float div</
div
>
2
<
script
type
=
"text/javascript"
>
3
$('#d1').css('styleFloat', 'right');
4
</
script
>
IE6/7/8/9/10/Opera:设置成功(Opera是个怪胎,styleFloat和cssFloat都支持)
Firefox/Safari/Chrome:设置不成功
因此,使用css方法获取或设置浮动时为避免各浏览器差异还是老老实实的使用float。不要使用styleFloat或cssFloat。
当然如果这算jQuery的bug,那么修复也是很容易的
1,修改jQuery.css方法,加个styleFloat的判断。
1
// cssFloat needs a special treatment
2
if
( name ===
"cssFloat"
|| name ===
"styleFloat"
) {
3
name =
"float"
;
4
}
这样使用$(xx).css("styleFloat") 就没有兼容性问题了。
2,修改jQuery.style方法,加个判断如果传styleFloat或cssFloat都转成float
01
// Don't set styles on text and comment nodes
02
if
( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
03
return
;
04
}
05
// 这是加的修复代码
06
if
( name ===
"cssFloat"
|| name ===
"styleFloat"
) {
07
name =
"float"
08
}
09
// Make sure that we're working with the right name
10
var
ret, type, origName = jQuery.camelCase( name ),
11
style = elem.style, hooks = jQuery.cssHooks[ origName ];
这样使用$(xx).css("cssFloat", "right") 或 $(xx).css("styleFloat", "right") 各浏览器就都ok了。
- jQuery(1.6.3) 中css方法对浮动的实现缺陷
- css中清除浮动的主要方法
- css中清除浮动的标准方法
- JavaScript and CSS 定位与浮动对的实现
- 上课后对【css】中清除浮动的总结
- 用css实现的浮动层的方法
- css 清除浮动的方法
- CSS清除浮动的方法
- css清楚浮动的方法
- css 浮动问题解决的方法
- CSS清除浮动的方法
- CSS 清除浮动的方法
- 清除css浮动的方法
- CSS清除浮动的方法
- css清除浮动的方法
- css清除浮动的方法
- CSS清除浮动的方法
- CSS清除浮动的方法
- 使用RemObjects Pascal Script
- select options标签IE6兼容解决方案
- [营销]浅谈如何提高网站PR值
- 用VC制作支持多种语言的界面
- JS实例
- jQuery(1.6.3) 中css方法对浮动的实现缺陷
- MYSQL数据导出和导入
- C6000嵌入汇编C与汇编对照及功能说明
- Spotlight on oracle 使用
- linux生成动态库和静态库
- hdu3828动态规划
- Hibernate中常见问题 No row with the given identifier exists问题的原因及解决
- Hibernate异常No row with the given identifier exists 解决方法
- Plone 4.x 学习之创建自定义工具