• 兼容性处理


    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-tap-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属性。

  • 相关阅读:
    如何提高完成端口的性能
    我回来了
    减少资源包中的图片,提高效率
    新的MOVE结构,和在项目中实际的感受
    截图小结
    本周小记
    css选择器
    CSS的三种引入方式
    A标签的四个伪类(L V H A)排序上的讲究
    关于CSS清理浮动的方法
  • 原文地址:https://www.cnblogs.com/xqmyhome/p/11078812.html
Copyright © 2020-2023  润新知