Chrome和Firefox针对特定的DOM对象,同样的JQ代码,执行的结果可能不一样。
例如: 针对img元素,获取元素的width、height,结果其实是不一样的。
// 获取img元素的宽度
$('img').width();
/*
* 在chrome中获取的width是图片的可视宽度,而非图片的netural宽度(真实宽度)
* 在firefox中获取的width是图片的真实宽度而是可视宽度
* 以上行为的差距就使得在通过获取width来给特定dom元素定位是,
* 不同的浏览器显示的效果就会不一致
* 针对以上这种情况需要是用JS的原生方法来获取元素的宽度
*/
//使用querySelectAll获取dom元素,绝大部分的主流浏览器已经支持该方法
Img = document.querySelectorAll('img')[0];
//获取Img对象的可视宽度
visualWidth = Img.clientWidth;
//获取Img的真实宽度
neturalWidth = Img.naturalHeight;
/*
* 除了以上的问题之外,firefox对js代码的执行会非常快,例如针对img图片元素绑定事件,
* 如果不检查图片是否完全载入而直接执行代码的话,代码是无法正常运行的,
* 这一点chrome似乎没有这个问题。
*/
//JQ监听判断图片是否完全载入
$(img).load(function(){
// Do something.
})