浏览器兼容性解决方案

1.IE不识别nth-child属性(IE8及以下版本)
2.IE7(及以下版本)使用padding属性会将元素高度和宽度扩大。
解决方法：将元素在IE7及以下版本的宽度和高度减去padding边距
3.同样高度的input放在div里面，在IE8下iuput会超出div的范围
解决方法：设置input的高度小于div的高度
4.写js文件，在success:function(data){}后面不要加上,号，IE浏览器（IE7及以下版本）会报错导致js文件不能执行
5.IE浏览器（IE9及以下版本）不识别btoa方法
暂时解决方法：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
（Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。）
6.IE浏览器不支持placeholder属性，方法：
先引入 Jquery-placeholder.js文件，再
$(function(){$('input, textarea').placeholder(); });
（识别ie7+，实现placeholder属性）
7.有时候同时设置a:visited和a:hover的样式，但一旦超链接访问后，hover的样式就不再出现。解决方法：
a标签的四种状态的排序问题：link-visited-hover-active
8.IE8及以下版本不支持getElementsByClassName()
9.IE8及以下版本不支持opacity属性，支持另一种过滤器属性：filter:Alpha(opacity=50)
10.获取滚动条滚动高度：
var scrolltop = window.pageYOffset|| document.documentElement.scrollTop|| document.body.scrollTop;

11.ie7下z-index失效

解决方法 ：绝对定位元素的“有定位属性（relative或absolute）的父元素”在渲染层次时起到了主要作用，解决办法就是给有定位属性的父元素设置z-index

浏览器前缀：

Chrome safari  -webkit

Firefox       -moz

Ie            -ms(IE8+支持)

Opera         -o

 

Css权重：

  当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式，权重的规则是这样的：

HTML 标签的权重是1，class的权重是10，id的权重是100