浏览器兼容性问题汇总

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='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使用其他垂直居中方法即可