兼容性处理

1、IOS 中光标错位或过长问题：

　　导致原因：input 设置了 line-height 或 fixed 导致。解决办法去掉 line-height，设置 height 或使用 absolution

2、去掉 select 中默认下拉小箭头 　　

IE ：select::-ms-expand { display: none; }   /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
chorme： appearance:none;  -moz-appearance:none;   -webkit-appearance:none;   background-size: 12px 12px;   background: url("/assets/img/caret.png") no-repeat scroll right center transparent;

3、H5 中苹果手机字体大小缩放了，解决方法： 设置 css -webkit-text-size-adjust: none; 

4、重置input 右侧小人问题      input::-webkit-contacts-auto-fill-button {    visibility: hidden;     display: none !important;    pointer-events: none;   position: absolute; right: 0;   }

5、解决h5页面点击元素出现灰色背景    div {-webkit-tab-highlight-color: rgba(0,0,0,0); } 

6、解决手机中office 中 i 上的点不显示问题  -webkit-font-variant-ligatures: none;      font-variant-ligatures: none;

7、苹果手机按钮重置 

      input[type=button]{   -webkit-appearance:none; outline:none    }

      input[type="button"], input[type="submit"], input[type="reset"] {     -webkit-appearance: push-button; white-space: pre;     }

8、IE 浏览器下滚动条遮挡部分内容       html, body { -ms-overflow-style: scrollbar; }

9、IE 10 浏览器input文本输入时 右边显示 X      input::-ms-clear{display: none;}     input::-ms-reveal{display: none;}

10、IE 中 a 标签如果不是跳转要去掉 target 属性 javascript:; 改为： javascript:void(0);

11、苹果滑动卡顿问题    在父元素上加上 -webkit-overflow-scrolling: touch; 

12、解决手机中 textarea 中字体大小与页面不一致问题    display:inline-table;

13、解决 H5 页面 安卓虚拟键盘遮挡 input。

　　var view_height = $(document.body).height()

　　function change(){ 
    　　$(document.body).height(view_height )
　　}
　　change();
　　window.addEventListener('resize',change,false);
14、苹果手机点击无效，如果点击的dom元素是div|p等元素，添加 cursor:pointer属性。

 

 

 

转载于:https://www.cnblogs.com/xqmyhome/p/11078812.html