首页 新闻 搜索 专区 学院

jQuery的css("width")、css("height")在Firefox上获得的值与在Chrome上获得的值不同

0
悬赏园豆:30 [已解决问题] 解决于 2014-01-10 10:31

[代码1]

//file.css

.btn

{

  width: 200px;

  height: 26px;

}

// file.html

<input type=button class=btn />

在这种情况下,在Firefox上使用css("width")、css("height")获得的值分别为194px、20px,而在Chrome和IE 6上测试获得的值为200px、26px。

 

[代码2]

<input type=button style="width:200px;height:26px;" />

在这种情况下,Firefox、Chrome、IE 6上使用css("width")、css("height")获得的值相同,均为200px、26px。

 

[问题]

1.这是为什么呢?哪里有可靠的解释?
2.怎么解决这个问题?

快乐的凡人721的主页 快乐的凡人721 | 老鸟四级 | 园豆:2164
提问于:2012-09-06 11:37
< >
分享
最佳答案
0

input type=button class="btn"  获取的值不对,是不是其他元素padding、margin影响到了

            或者 还是有别的样式影响到了它,用Firebug 看下。

收获园豆:10
jingjunfeng | 小虾三级 |园豆:873 | 2012-09-06 17:35

谢谢你!

不好意思这么晚才回复。

刚才做了测试,这个应该和文档类型声明有关系的。

为什么会这样我就不清楚了。

快乐的凡人721 | 园豆:2164 (老鸟四级) | 2014-01-10 10:30

另外,我又在IETester上的IE 6、7、8上进行了测试,IE 6、7上显示错误,为22px、196px,IE 8显示正确。

快乐的凡人721 | 园豆:2164 (老鸟四级) | 2014-01-10 10:36

但是,XP都要被淘汰了,就不去想什么IE 6、7了。

麻烦大家了!

快乐的凡人721 | 园豆:2164 (老鸟四级) | 2014-01-10 10:37
其他回答(2)
0

我试了一下没有你说的情况。

你的代码是干净的吗?页面上只有你上面说的那些代码吗?

或者你firefox缓存了什么css?产生干扰了?

上面这两点你查一下

收获园豆:10
田林九村 | 园豆:2367 (老鸟四级) | 2012-09-06 12:54

谢谢!很抱歉这么晚回复啊!

我刚才使用jquery-1.10.2.js试了一下,如果<html>标签只是如此的话,在IE 8上获得的高度和宽度分别为22px和196px,而在Chrome 31和Firefox 26上获得的值为.btn中设置的26px和200px。

当将<html>标签改为如下形式时:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

这三种浏览器获得的高度和宽度值均正确,为26px和200px。

源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type=text/javascript>
$(document).ready(function(){
    alert("Height: " + $("#mybtn").css("height") +
            "\nWidth : " + $("#mybtn").css("width"));
    //alert($("#mybtn").attr("name"));
});
</script>
<style type="text/css">
.btn
{
    width:200px;
    height:26px;
}
</style>
</head>
<body>
<input type=button id=mybtn value="my button" class=btn />
</body>
</html>

至于为什么这样我就不清楚了~

支持(0) 反对(0) 快乐的凡人721 | 园豆:2164 (老鸟四级) | 2014-01-10 10:25
0

应该是楼主的代码问题,jQuery还是经历过考验的,它的最重要的特点就是游览器的兼容性很好

收获园豆:10
chenping2008 | 园豆:9836 (大侠五级) | 2012-09-06 13:14

谢谢你!

不好意思这么晚才回复啊!

刚才测试了jquery-1.10.2.js的情况,将<html>更改为下面的代码后在IE 8、Chrome 31和Firefox 26上都能正确获得宽度和高度了:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

支持(0) 反对(0) 快乐的凡人721 | 园豆:2164 (老鸟四级) | 2014-01-10 10:27
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册