js
阻止冒泡事件
火狐:我们可以在点击事件时传入参数event,然后直接
event.stopPropagation();
ie:this.cancleBubble()
f
\n 换行
css
三角
width:0px; height:0px; overflow:hidden; border-width:10px; border-color:transparent transparent yellow transparent; border-style:dashed dashed solid dashed; 背景图按比例放大缩小 background-size:70% 200%; 省略号 white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;叉
× box-sizing:border-box; -moz-box-sizing:border-box;-webik-box-sizing:border-box; 因盒子边框而掉块 filter:alpha(opacity=50) textarea的兼容 overflow:hidden; padding-top:0px; magin:0px;opcaity兼容opacity:0;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;
vertical-align:bottom; 解决边框高出几像素问题
解决input在手机端问题
var w_w = $(window).width(); var w_h = $(window).height(); $("body,#main,.page4").css({width:w_w,height:w_h}); 不能用fixed定位在苹果手机上进入页面不能滑动
解决方法:将滑动事件放在图片加载完后执行
判断手机是否为安卓 function isAndroid(){ var u = navigator.userAgent; if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){}
}
判断手机是否为苹果 function isIphone(){ var u = navigator.userAgent; if (u.indexOf('iPhone') > -1) { } }get请求
Main.get('',{Contact:Contact,Sex:Sex,Name:Name},function(res){
if(res.err==0){}else if(res.err==2){ alert(res.msg); }
})
Main.get = function(url, data, success) { $.ajax({ type : 'get', url : Main.url+url, dataType : 'jsonp', data : data, success : function(response) { console.log(response); if(response.err==99){ location.href=response.url return ; } success(response); } }) }适应剧中
height: 50%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%);背景图在苹果手机不适应
用position:fixed点击事件不灵敏
层的关系
手机端//
去除按钮蓝色边框
a,button,input,textarea,span,div,em,i,img{-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids / outline: none; -moz-outline-style: none; -webkit-user-select: none;/用户不可选 中元素的内容*/ } 出现能够拖动的问题解决方法判断ie版本if(navigator.userAgent.indexOf("MSIE")>0){ if(navigator.userAgent.indexOf("MSIE 6.0")>0){ location.href="http://e.sinreweb.com" } if(navigator.userAgent.indexOf("MSIE 7.0")>0){ location.href="http://e.sinreweb.com" } if(navigator.userAgent.indexOf("MSIE 8.0")>0 && !window.innerWidth){//这里是重点,你懂的 location.href="http://e.sinreweb.com" } if(navigator.userAgent.indexOf("MSIE 9.0")>0){ location.href="http://e.sinreweb.com" } } 解决input在手机端问题var w_w = $(window).width(); var w_h = $(window).height(); $("body,#main,.page4").css({width:w_w,height:w_h});微信返回按钮返回上一页$('.page_index .anniu2').click(function(){ location.href='#a' })window.onhashchange=function(){ var a=location.href.split('#'); if(a.length>1){ if(a[1].indexOf('a')>-1){ $('.page_index').show().addClass('cur') $('.page_index2').hide() }else if(a[1].indexOf('b')>-1){ $('.page_index2').show().addClass('cur') $('.page_index4').hide() } }}Main.browerVersions=function(){ var u = window.navigator.userAgent; var num ; if(u.indexOf('Trident') > -1){ //IE return "IE"; }else if(u.indexOf('Presto') > -1){ //opera return "Opera"; }else if(u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1){ //firefox return "Firefox"; }else if(u.indexOf('AppleWebKit' && u.indexOf('Safari') > -1) > -1){ //苹果、谷歌内核 if(u.indexOf('Chrome') > -1){ //chrome return "Chrome"; }else if(u.indexOf('OPR')){ //webkit Opera return "Opera_webkit" }else{ //Safari return "Safari"; } }else if(u.indexOf('Mobile') > -1){ //移动端 if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ //ios if(u.indexOf('iPhone') > -1){ //iphone return "iPhone" }else if(u.indexOf('iPod') > -1){ //ipod return "iPod" }else if(u.indexOf('iPad') > -1){ //ipad return "iPad" } }else if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){ //android num = u.substr(u.indexOf('Android') + 8, 3); return {"type":"Android", "version": num}; }else if(u.indexOf('BB10') > -1 ){ //黑莓bb10系统 return "BB10"; }else if(u.indexOf('IEMobile')){ //windows phone return "Windows Phone" } }};body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/}a, img { -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/}html, body { -webkit-user-select: none; /*禁止选中文本*/ user-select: none;}button,input,optgroup,select,textarea { -webkit-appearance:none; /*去掉webkit默认的表单样式*/}a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/}input::-webkit-input-placeholder { color:#ccc; /*修改webkit中input的planceholder样式*/}input:focus::-webkit-input-placeholder { color:#f00; /*修改webkit中focus状态下input的planceholder样式*/}body { -webkit-text-size-adjust: 100%!important; /*禁止IOS调整字体大小*/}input::-webkit-input-speech-button { display: none; /*隐藏Android的语音输入按钮*/}打电话给:020-10086发短信给: 10086发送邮件: me@22278.club
上面的文件上传框中,accept 可以限制上传文件的类型,参数为 image/* 是所有图片类型,点击会弹出图库,也可以指定图片格式,参数设置成 image/png 则可以限制图片类型为png;参数如果为 video/* 则是选择视频的意思;accept 还可以设置多个文件格式,语法为 accept="image/gif, image/jpeg" ;
使用box-shadow改变(挡住)表单自动填充后的黄色
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ box-shadow:inset 0 0 0 1000px #fff;}获取url?后面的参数function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null;}
注意:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
所以我们在写CSS的时候,需要注意两点: 1. body选择器中声明Font-size=62.5%; 2. 将你的原来的px数值除以10,然后换上em作为单位; 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
//滚动条样式::-webkit-scrollbar { width: 1px;}::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); border-radius: 10px;}::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0,0,0,0); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);}::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0);}