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.怎么解决这个问题？
最佳答案
0
input type=button class="btn" 获取的值不对，是不是其他元素padding、margin影响到了
或者 还是有别的样式影响到了它，用Firebug 看下。
收获园豆：10
谢谢你！
不好意思这么晚才回复。
刚才做了测试，这个应该和文档类型声明有关系的。
为什么会这样我就不清楚了。
另外，我又在IETester上的IE 6、7、8上进行了测试，IE 6、7上显示错误，为22px、196px，IE 8显示正确。
但是，XP都要被淘汰了，就不去想什么IE 6、7了。
麻烦大家了！
其他回答(2)
0
我试了一下没有你说的情况。
你的代码是干净的吗？页面上只有你上面说的那些代码吗？
或者你firefox缓存了什么css?产生干扰了？
上面这两点你查一下
收获园豆：10
谢谢！很抱歉这么晚回复啊！
我刚才使用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
应该是楼主的代码问题，jQuery还是经历过考验的，它的最重要的特点就是游览器的兼容性很好
收获园豆：10
谢谢你！
不好意思这么晚才回复啊！
刚才测试了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" >