zoukankan      html  css  js  c++  java
  • 整理前端css/js/jq常见问题及解决方法(2)

    移动端 手机

    1、点击图片或按钮,选中状态影响到其他范围
    解决:
    html{-webkit-user-select:none}
    <meta name="msapplication-tap-highlight" content="no" />


    2、禁止长按 a,img 标签长按出现菜单栏
    a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
    }


    3、
    去掉 a,input 在移动端浏览器中的默认样式(半透明灰色遮罩阴影)
    a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
    }

    4、省略
    只适合移动端: overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

    pc端的省略:

    //===================js超出两行省略====================
    function wordlimit(cname,wordlength){
    //参数分别为:类名,要显示的字符串长度

    var cname=document.getElementsByClassName(cname); //需要加省略符号的元素对象
    for(var i=0;i<cname.length;i++){
    var nowhtml=cname[i].innerHTML; //元素的内容
    var nowlength=cname[i].innerHTML.length; //元素文本的长度
    if(nowlength>wordlength){
    cname[i].innerHTML=nowhtml.substr(0,wordlength)+'...'; //截取元素的文本的长度并加上省略号
    }
    }
    }

    wordlimit的使用,在遍历玩json并赋予容器之后使用。
    wordlimit("类名","显示字数个数");

    //===================jq超出字数省略====================

    //限制字数省略
    $(function(){

    /*订单详情商品名称*/
    $(".pod_p_span1").each(function(){
    var maxwidth=17;
    if($(this).text().length>maxwidth){
    $(this).text($(this).text().substring(0,maxwidth));
    $(this).html($(this).html()+"...");
    }
    })
    })

    5、禁止复制选中文字
    html{

    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    }

    6、禁止window phone默认触摸事件
    html{-ms-touch-action: none;}


    //=============================================css属性兼容性====================================================

     gradientType为0时代表垂直,为1时代表水平

    1、ie不支持透明属性filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); filter:alpha(opacity=70)

    ie8 background-size
    兼容:用滤镜处理
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='背景图片地址',
    sizingMethod='scale');

    渐变颜色

    ie8兼容解决方法: 

    /*渐变颜色*/
      .class2{
      200px;
      height: 100px;
      background: linear-gradient(to right,#ef4f4f,#ffffff);
      background: -webkit-linear-gradient(to right,#ef4f4f,#fff);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef4f4f', endColorstr='#fff');
     

    2、last-child ie8不兼容 first-child为css2属性ie8兼容 解决方法给最后一个div加.last


    //=============================================移动端解决底部fixed导致底部位于软键盘上面====================================================

    //通过监控键盘展开或收起导致的浏览器的高度去隐藏显示底部

    $(document).ready(function(){
    var h=$(window).height();
    $(window).resize(function() { //对浏览器窗口调整大小进行计数:
    if($(window).height()<h){
    $('.footer').hide();
    }
    if($(window).height()>=h){
    $('.footer').show();
    }
    });

    });
  • 相关阅读:
    扫描与爆破
    复习与PKI技术

    IIS与FTP
    IIS与WEB
    DNS部署与安全
    DHCP服务部署与安全
    文件共享服务CIFS
    NTFS权限
    关于操作运算符的一些小练习
  • 原文地址:https://www.cnblogs.com/ss977/p/6361015.html
Copyright © 2011-2022 走看看