方便只看结论的人:
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