主流浏览器兼容性点滴记录

  1. 事件发生时,ie中事件在window.event中,非ie自动添加event变量
  2. ie中事件源为window.event.srcElement属性,非ie事件源为event.target属性,但ie在函数中传递window.event变量时,srcElement属性变为null,很诡异。
  3. dom的getBoundingClientRect()方法,ie中没有width,height属性,非ie有。
  4. 为获得浏览器可视区域高度,非ie有document.height属性,ie无。统一用document.documentElement.clientHeight
  5. ie中URL查询字符中不能有中文,否则返回400错误。中文查询字符须得编码,js中使用encodeURIComponent()方法。非ie无此问题。
  6. ie6、7躲猫猫bug。一个浮动元素后接一些非浮动元素,再接清理元素,都包含在一个设置了背景父元素中,非浮动元素在刷新后才显示出来。ie7中有更诡异的现象,ul标签中只有最有一个li出现躲猫猫(li中的结构都一样)。元素在overflow设为hidden的div中滚动时,当元素全部显示在div中时出现躲猫猫现象,当其底部超出div时显示正常。疑与清除元素碰不碰到浮动元素有关。解决之道:不设置容器背景、给定容器固定高或宽、设置容器为relative、设置line-height。
  7. 在ie,element中的lastchild,firstchild是最后一个、第一个元素孩子,非ie中为最后一个、第一个空白节点。用nodeType来判断
  8. 在ie6、7中,设置了overflow的元素中如果饱含了设置relative的元素时,当内容超出容器时,会出现滚动条,但overflow失效
  9. ie6、7中,dd标签默认没有margin-left属性,ie8以上及非ie有代理样式。并且dd的中的第一个含有文本的子元素距dd边框有大约50px的边距。修复:设置relative定位,left设负值或者添加margin-left属性,设负值
  10. ie中若img标签的src为空,则显示X图标。非ie无显示。用属性选择器img[src=””]可令ie8不显示图标,ie7虽支持属性选择器,但依然有X图标显示。
  11. ie6不支持pn背景透明。用ie滤镜progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/imgs/icon.png”)

    原文链接:http://birdroid.diandian.com/post/2012-02-12/16907582

留下评论