浏览器兼容性问题汇总

1.IE10版本以上浏览器input标签后面自带一个X问题IE10IE11浏览器当点击input text文本框时输入文本后出现一个删除功能的X按钮IE浏览器效果而谷歌浏览器没有解决方案给input添加如下CSS样式 input::-ms-clear{display:none;}2.IE8以下不支持canvas 标签可以下载Google出的Excanvas.js库它是利用IE支持的VML对象来模拟Canvas的绘图的有些情况下可用但无法穷尽Canvas的所有功能在页面中引用Excanvas.js文件最好在标签中3.IE8以下不支持html5 标签解决方案可以用封装好的js库— html5shiv.js// 增加判断如果是IE9以下的IE浏览器将创建script标签引入html5shiv这样非IE浏览器就会忽视这段代码也就不会进行无谓的http请求了// Google的html5shiv包 !--[if lt IE9] script srchttp://html5shiv.googlecode.com/svn/trunk/html5.js/script ![endif]-- // 国内的html5shiv包 !--[if lt IE 9] script srchttps://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js/script ![endif]--4.IE8以下不支持CSS媒体查询在css文件的引用位置后面引入js尽量在页面最上面引入script srchttps://cdn.bootcss.com/respond.js/1.1.0/respond.min.js/script5.js事件绑定//IE7、IE8 dom.attachEvent(); //其他浏览器 dom.addEventListener(click,function(event){},false); //兼容写法 ele元素 evType事件 fn执行函数 useCapture事件监听器在‌冒泡阶段‌执行默认为false function addEvent(ele, evType, fn, useCapture) { if (ele.addEventListener) { //一般浏览器 var e 2.718 ele.addEventListener(evType, fn, useCapture); return e; } else if (ele.attachEvent) { // IE var e ele.attachEvent(on evType, fn); return e; } else { // 其他DOM事件 ele[on evType] fn; } } //addEventListener() || removeEventListener() ; // 标准浏览器的监听和移除写法 //attachEvent() || detachEvent() // IE的监听和移除写法6.js获取event事件对象//ie浏览器通过 window.event获得事件源对象 //其他浏览器通过 e //兼容写法如下 function clickBtn(e){ var ev e || window.event; .... }7.获取event事件源对象//ie浏览器获取事件源对象(触发事件的标签对应的dom对象)event.srcElement //其他浏览器:event.target //兼容性写法: var srcObj event.srcElement?event.srcElement:event.target;8.阻止事件冒泡var e e || Window.event; if (e.stopPropagation) { // 其他 e.stopPropagation(); } else { // IE... . e.cancelBubble true; }9.阻止默认事件// js阻止默认事件一般阻止a链接href, form表单submit提交等 var e e || Window.event; if (e.preventDefault) { // 其他浏览器 e.preventDefault(); } else { // IE... e.returnValue false; }10.innerText 的问题if (navigator.appName.indexOf(Explorer) -1){ document.getElementById(element).innerText text; // IE } else { document.getElementById(element).textContent text; // 其他 }11.禁止复制、选中文本{-webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; user-select:none; }12.apple-mobile-web-app-capablemeta nameapple-mobile-web-app-capablecontentyes //如果content设置为yesWeb应用会以全屏模式运行反之则不会。content的默认值是no表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示13.format-detectionmeta nameformat-detectioncontenttelephoneno //默认情况下设备会自动识别任何可能是电话号码的字符串。设置telephoneno可以禁用这项功能14.上下拉动滚动条时卡顿、慢body {-webkit-overflow-scrolling: touch; overflow-scrolling: touch;} //Android3和iOS5支持CSS3的新属性为overflow-scrolling15.长时间按住页面出现闪退.element { -webkit-touch-callout:none; }16.iphone及ipad下输入框默认内阴影.Element{ -webkit-appearance:none; }17.ios和android下触摸元素时出现半透明灰色遮罩.Element { -webkit-tap-highlight-color:rgba(255,255,255,0) } //设置alpha值为0就可以去除半透明灰色遮罩备注transparent的属性值在android下无效。18.某些Android手机圆角失效.element{background-clip: padding-box;}19.设置缓存meta http-equivCache-Controlcontentno-cache/ //手机页面通常在第一次加载后会进行缓存然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。20.启动画面link relapple-touch-startup- image hrefstart.png/ //iOS下页面启动加载时显示的画面图片避免加载时的白屏。 //可以通过madia来指定不同的大小 !--iPhone-- link hrefapple-touch-startup-image-320x460.pngmedia(device-width: 320px) relapple-touch-startup-image/ !-- iPhone Retina -- link hrefapple-touch-startup-image-640x920.pngmedia(device-width: 320px) and (-webkit-device-pixel-ratio: 2) relapple-touch-startup-image/ !-- iPhone 5-- link relapple-touch-startup-imagemedia(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) hrefapple-touch-startup-image-640x1096.png !-- iPad portrait-- link hrefapple-touch-startup-image-768x1004.pngmedia(device-width: 768px) and (orientation: portrait) relapple-touch-startup-image/ !-- iPad landscape-- link hrefapple-touch-startup-image-748x1024.pngmedia(device-width: 768px) and (orientation: landscape) relapple-touch-startup-image/ !-- iPad Retina portrait-- link hrefapple-touch-startup-image-1536x2008.pngmedia(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) relapple-touch-startup-image/ !-- iPad Retina landscape-- link hrefapple-touch-startup-image-1496x2048.pngmedia(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)relapple-touch-startup-image/21.IOS中input键盘事件keyup、keydown、keypress支持不是很好用input search做模糊搜索的时候在键盘里面输入关键词会通过ajax后台查询然后返回数据然后再对返回的数据进行关键词标红。用input监听键盘keyup事件在安卓手机浏览器中是可以的但是在ios手机浏览器中变红很慢用输入法输入之后并未立刻相应keyup事件只有在通过删除之后才能相应//可以用html5的oninput事件去代替keyup input typetextidtestInput script typetext/javascript document.getElementById(testInput).addEventListener(input,function(e){ varvalue e.target.value; }); /script22.h5网站input 设置为typenumber的问题问题一是maxlength属性不好用了input typenumberοninputcheckTextLength(this ,10) script functioncheckTextLength(obj, length) { if(obj.value.length length) { obj.value obj.value.substr(0, length); } } /script问题二是form提交的时候默认给取整了form提交默认做了表单验证step默认是1,要设置step属性假如保留2位小数写法如下input typenumberstep0.01/input 中typenumber一般会自动生成一个上下箭头点击上箭头默认增加一个step点击下箭头默认会减少一个step。number中默认step是1。也就是step0.01,可以允许输入2位小数并且点击上下箭头分别增加0.01和减少0.01问题三是去除input默认样式input[typenumber] { -moz-appearance:textfield; } input[typenumber]::-webkit-inner-spin-button, input[typenumber]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }23.IOS键盘字母输入默认首字母大写input typetext autocapitalizeoff/ //设置属性autocapitalizeoff24.关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)//iOS 浏览器横屏时会重置字体大小设置 text-size-adjust 为 none 可以解决 iOS 上的问题但桌面版 Safari 的字体缩放功能会失效因此最佳方案是将 text-size-adjust 为 100% 。 .element{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-size-adjust:100%; }25.小程序ios键盘字数限制input的maxlength在有问题//ios端汉字输入拼音 会被当作length,一旦超过了max-length, 键盘上汉字还没拼出来 就已经输入不了 //解决方法去掉maxlength,使用bindinput方法 input typetext bindinputinputChange / script inputChange(e) { let text e.detail.value.trim() this.setData({ name:text.substring(0,10) }) } /script26.string.replaceAll()ios正常安卓不兼容replaceAll方法建议改用replace