整理前端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();
}
}); });
上一篇:Python学习笔记:与Java 基础语法对比


下一篇:微信内置浏览器H5 弹出键盘 遮盖文本框解决办法 Fixed失效