整理前端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{
	width: 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();
        }
    });

});