相思资源网 Design By www.200059.com
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 : 返回空字符串"none"
IE9/Firefox/Safari/Chrome/Opera : 返回空字符串
又如使用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了。
复制代码 代码如下:
<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 : 返回空字符串"none"
IE9/Firefox/Safari/Chrome/Opera : 返回空字符串
又如使用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了。
标签:
css,浮动
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无jQuery(1.6.3) 中css方法对浮动的实现缺陷分析的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?