css兼容总结

UI在不同手机出现了兼容问题，很大一部分原因是自己造成的。  css滥用，css没考虑多种内核，dom结构不对.......(持续更新)

我要总结：

1苹果点击自带hover效果

2 includes()—> indexOf()    MDN查询api兼容性

3公告叉叉不能点击----dom结构（position）的问题

4safari浏览器默认阻挡cookie

5解决单文件合作开发的冲突问题----提前分好行数     一个人1000行    

6变量用    localstorage去读   为什么不用用全局变量去读      javascript作用域链----在局部作用域中访问全局变量需要一层一层遍历整个作用域链直至顶级作用域，而局部变量的访问效率则会更快更高，因此在局部作用域中高频率使用一些全局对象时可以将其导入到局部作用域中,

7  403的处理    如果运维无法处理，手机站要加一个IP策略

8 input  type="number " 使用oninput="fun()"    fastclick报错Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection

不影响使用   暂无解决办法

9 两个inline-block  10% 90%会变成两行   中间有间隙    一个float：left   width占比不变  就好了

10 宽度和高度使用百分比会在不同手机浏览器上造成兼容问题   比如输入时safari高度不变   但是到了uc  高度就缩小了    

11 input 光标高度问题  

                    chrome浏览器对光标高度的设置原则为，当没有内容的时候光标的高度=input的line-height的值，当有内容时，光标从input的顶端到文字的底部。

 方法1：将line-height的值设置为跟字体大小一致；如果高度达不到，用padding去撑；方法2：对chrome不设置line-height，它会自动文字居中，对ie进行hack设置line-height的值以保证文字垂直居中；这里要注意一下，如果在reset的样式文件中有设置line-height等值，请进行line-height的重置，可以用line-height:normal。具体可以看看腾讯好莱坞页面的搜索框。

15:input disabled   在safari上默认的opacity是0.3

input{
-moz-appearance: none;
-webkit-appearance:none;
}
input[disabled],input:disabled{
-webkit-text-fill-color:#fff;
-webkit-opacity: 1;
color:#fff;
}
* html input.disabled{
-webkit-text-fill-color:#fff;
-webkit-opacity: 1;
color:#fff;
}

16大多数安卓手机滑动的时候   头部和底部是一直存在的 (safari没有)     UI在做psd的时候要考虑到

17  

html{
-webkit-text-size-adjust:100%;
}  加上meta解决   iphone手机横屏 字变大

 

18两个div用图片做背景  会出现一条横线  使用一个margin-top：-1px解决

20两个span之间莫名的有间距：这些间隙是源码中换行造成的, 会占用一个空格的空间, 我们可以简单的将所有的span都合并成一行, 但这样的代码会不堪入目啊.

    <style>
    .none-gap-span {
        letter-spacing: -0.5em;//由fontsize决定
    }
    .none-gap-span span {
        background-color: yellow;
        letter-spacing: normal;
    }

稳妥写法：

<p>

<span>1</span><!--

--><span>2</span><!--

--><span>3</span>

</p>