兼容性问题 & 疑难问题

1、background-position-x 在部分老版本浏览器不兼容，建议使用 background-position:x y;

2、嵌套两层行内块，且为两个行内块都设置行高，则外层行内块与其兄弟元素之间的垂直距离会因为受到行高影响而比Css设置的高。

3、对于input按钮，给定行高但不给定高度时，在FireFox上按钮实际高度比行高多2px，在其他浏览器则没有。

原因是：浏览器私有属性 ::-moz-focus-inner{padding:2px 0;} 导致

4、在<a>标签中嵌套使用<input type='checkbox'/>时，点击checkbox在FireFox浏览器中会冒泡到<a>标签上，若对<a>或者checkbox阻止冒泡，同时也会将checkbox的选中事件阻止掉，因此，只能通过隐藏checkbox，并通过Css做一个假的checkbox来解决这个问题。

在Chrome浏览器中不会有这个问题。

5、IE9不支持 .style.transform 获取值？

6、IE8以下支持 ele.attachEvent(ev,fun)，IE8以上及其他支持 ele.addEventListener(ev,fun,useCapture)，其中useCapture是一个Bool值，false代表使用冒泡，true代表使用捕获

前者事件带on，后者不带；（如：ele.attachEvent('onclick',fun)）

7、360极速模式下，子元素的transform影响父元素的radius；（原因似乎是浏览器解析或渲染时异常影响到父元素？）

解决：给父元素加一个transform或transition

8、火狐和谷歌等浏览器对 document.body.scrollTop 和 document.documentElement.scrollTop只支持其中之一，但使用时无需判断浏览器来使用不同的方法，因为两者永远只存其一，所以使用时可直接将两者相加

9、chrome浏览器表单自动填充默认样式-autofill：

chrome浏览器可以记住用户登录网站时输入的帐号密码，当用户选择使用chrome浏览器记录的内容时，输入框背景会变成黄色，原因是 chrome自动为其增加的样式：

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {

background-color: rgb(250, 255, 189); background-image: none; color: rgb(0, 0, 0);}

解决方法：

1）关闭浏览器自带填充表单功能 autocomplete="off"

2）通过纯色的阴影覆盖黄色背景

input:-webkit-autofill {

-webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #333;}

3）通过设置input样式动画

<!-- 99999s 基本上就是一个无限长的时间

通过延长增加自动填充背景色的方式, 是用户感受不到样式的变化 -->input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 99999s; -webkit-transition: color 99999s ease-out, background-color 99999s ease-out; }

10、禁止选中文本在webkit下的Bug ：在Android上没问题，在IOS上会使 input 输入框无法输入

原因：user-select:none; -webkit-user-select:none; //禁止选中文本

阻止了用户的选择内容行为，会导致一些“内容可编辑”标签无法正常使用，如input, textarea

解决方案：（未测试）

*: not(input, textarea) { -webkit - touch - callout: none; -webkit - user - select: none;}