首页 > 代码库 > 【转】浏览器兼容性问题汇总

【转】浏览器兼容性问题汇总

1:margin-left在IE6不生效(复现条件:块状元素、浮动、margin-left) ---------解决方法:http://www.seostudying.com/1233.html

技术分享

 

2: position:fixed 在ie6 、ie7(quirk) 、 ie8(quirk)下被当成错误处理。-----------解决方法:http://blog.sina.com.cn/s/blog_106f3d140100yaok.html

  解决思路:用 _position:absolute替代------>CSS HACK(expression)+margin ---------->防抖动处理 *html{background-image:url(about:blank); background-attachment:fixed;}

 

3:scrollTop 在FF chrome返回值为零 ------------解决方法:http://www.jb51.net/article/64328.htm

完美写法:var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

 

4:var ev = ev || window.event;

技术分享

 

5:CSS3新属性background-size在IE6、7、8下兼容解决办法---------http://www.tuicool.com/articles/Vrq2Q3B

  过滤器filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=http://www.mamicode.com/‘11.gif‘, sizingMethod=‘scale‘);

技术分享

6:透明兼容IE8- -------------------------------opacity / rgba

  opacity: 0.5; filter:Alpha(opacity:50);

  rgba(0,0,0,0.5);----------ie9+

 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#7F000000,endColorStr=#7F000000)-------------ie9-

  a:0.5 -------------> b:7F a*255------>16进制转换

  :root selector{filter:none\9 !important}------------------->/*ie9 hack*/

 

7:伪类visited在现代浏览器不兼容 -------------------------------https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/

(CSS属性不兼容的话,不如用js兼容性更好)

技术分享

 

8:js中获取子元素第一个节点

  firstChild-------IE8-正常;IE9+会把空格引起的文本节点#text解析出来

  firstElementChild------IE9+兼容;IE8-为undefined不报错

  异或写法---------var first = ul_dom.firstElementChild || ul_dom.firstChild;

  创统写法---------var first = ul_dom.children[0];

 

9:句号在某些机型可能不在文字右下角问题

    font-style: normal; font-family: SimSun;

 

10:ie6下浮动元素双倍外间距--------------------http://blog.csdn.net/sinat_16411539/article/details/50582090

    浮动元素加 display: inline;

 

11:连续a标签默认间距-----------------http://www.cnblogs.com/kevinCoder/p/6418605.html

  父元素font-size:0(推荐);

    a标签写在一行-----------当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙

 

12:img与父元素底部默认间距----------------http://www.cnblogs.com/lovelyun/p/4846222.html

  块级元素包含内联元素如图片文字等时,内联元素默认是和父级元素的baseline(基线)对齐的,而baseline又和父级元素底边有一定的距离(这个距离和font有关)

    父元素font-size:0 或者 vertical-align:bottom

 

13:IE6下 a元素添加onclick事件----------------http://www.3lian.com/edu/2014/09-16/165905.html

  onclick事件执行后冒泡到href是里的javascript:void(0); onclick处理函数内return false 阻止冒泡,或者去掉改变href。

 

14:输入框光标垂直居中line-height法不生效-----------------http://www.cnblogs.com/enmeen/p/5587825.html

  去掉line-height使用其他垂直居中方法即可

  技术分享

【转】浏览器兼容性问题汇总