jquery开发中遇到的两个浏览器兼容的问题（ie6、chrome）

方便只看结论的人：

ie6下：div绝对定位的位置，在容器已经满了的情况下和其他浏览器不同，其他浏览器会放在下面，而ie6会放到右边。记得要设置left属性。

chrome（webkit）下：document.ready是在图片加载以前就触发。当有图片操作的时候，最好使用window.load

开发一个简单的jquery插件，一个div，里面放个img，再放个div。插件把img的title属性调出来，显示在图片上面，隐藏里面的div，当鼠标移动到图片上的时候，隐藏的div显示在图片下方，提供控制操作。





就想这样，这是鼠标指上去的效果。

等做完了测试浏览器兼容性的时候发现，在ie6下面，鼠标指上去，下面的隐藏div没有显示。而在webkit核心浏览器下面，有的图片竟然没显示出来。



于是开始检查。因为后面两张，图片的高度没有设置，我想大概和这有关。于是新写了个页面测试。最后发现，ie6下兼容问题和图片的高度宽度无关。

这个是在firefox里面看到的。



这个是在ie6里面看到的



原来在ie6里面，因为没有设置隐藏div定位的left属性，ie6默认把他弄到边上去了。第一个问题找到。

在chrome查看源码的时候发现，内容都在，调开开发人员工具发现，原来是那两副图的外面的div高度变成0，所以没有显示。



最后发现，原来是 $(document).ready在webkit和其他的浏览器核心触发时的情况不一样。其他的都是在图片加载显示后才触发，而webkit核心居然在图片加载前。

这个是firefox里面的效果



这个是在chrome里面的效果



于是，只需要调用的时候把 $(document).ready改成 $(window).load就解决了。

总结：

ie6下：div绝对定位的位置，在容器已经满了的情况下和其他浏览器不同，其他浏览器会放在下面，而ie6会放到右边。记得要设置left属性。

chrome（webkit）下：document.ready是在图片加载以前就触发。当有图片操作的时候，最好使用window.load