浏览器兼容及解决方法

js学习

以后坚持一日一更，和大家分享我每天学习的成果及经验，让想要学习的小伙伴少走弯路。

一、鼠标样式

FF不支持hand，使用cursor:pointer兼容所有浏览器

二、innerText

IE、Safari、Opera和Chrome支持innerText属性。FF虽然不支持innerText，但支持作用类似的textContent属性，textContent是DOM3级规定的一个属性，而且也得到了safari、opera和Chrome的支持。为了确保跨浏览器兼容可以通过自定义方法来判断浏览器信息来适配if(navigator.appName.indexOf("Explorer") > -1)

三、透明度

filter:Alpha(opacity=0~100)兼容IE8及以下
opacity:0~1 兼容主流浏览器

四、width和padding

CSS标准：width为内容的宽度，也就是说： 层的宽度 = width + padding(left and right) + border-width；
IE则把width作为整个层的宽度： 内容的宽度 = width - padding - border-width；

五、ul和ol

IE中设置margin:0就可以去掉列表的上下左右缩进和前面的小圆点
FF中设置margin：0;padding：0;list-style:none;才能去掉上下左右缩进及小圆点

六、元素水平居中

FF：margin:0 auto;
IE：text-align:center;
tansform: translate3d(-50%, 0, 0); 兼容

七、元素垂直居中

vertical-align:middle; 将行距增加到和整个DIV一样高：
line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行

八、margin加倍问题

设置为float的div在IE下设置的margin会加倍。这是一个IE6存在的bug。解决方案是在这个div里面加上display:inline;

margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/

九、IE中宽和高

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度

#box{
      width: 80px; height: 35px;}
html>body #box{
      width: auto;height: auto; min-width: 80px; min-height: 35px;}