浏览器兼容性(手机,电脑。jshtmlcss)

2023年6月20日发(作者：)

浏览器兼容性（⼿机，电脑。jshtmlcss）javascript部分：对象获取问题FireFox：mentById(“idName”);ie:或者mentById(“idName”).解决办法：统⼀使⽤mentById(“idName”);问题说明:Firefox下,可以使⽤const关键字或var关键字来定义常量;IE下,只能使⽤var关键字来定义常量.解决⽅法：统⼀使⽤var关键字来定义常量..x与event.y问题说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.解决⽅法：使⽤mX(mX = event.x ? event.x : ;)来代替IE下的event.x或者Firefox下的问题说明:IE或者Firefox2.0.x下,可以使⽤on或;Firefox1.5.x下,只能使⽤on.解决⽅法：使⽤on来代替问题以下⾯的frame为例：(1)访问frame对象:IE:使⽤d或者ame来访问这个frame对象.frameId和frameName可以同名。Firefox:只能使⽤ame来访问这个frame对象.另外，在IE和Firefox中都可以使⽤mentById(“frameId”)来访问这个frame对象.(2)切换frame内容:在 IE和Firefox中都可以使⽤mentById(“testFrame”).src = “”或on =“”来切换frame的内容.如果需要将frame中的参数传回⽗窗⼝(注意不是opener,⽽是parent frame)，可以在frame中使⽤parent来访问⽗窗⼝。例如：=”Aqing”;6.模态和⾮模态窗⼝问题说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和⾮模态窗⼝;Firefox下则不能.解决⽅法：直接使⽤(pageURL,name,parameters)⽅式打开新窗⼝。如果需要将⼦窗⼝中的参数传递回⽗窗⼝,可以在⼦窗⼝中使⽤来访问⽗窗⼝.例如：var parWin = ; mentById(“Aqing”).value = “Aqing”;x与IE的⽗元素(parentElement)的区别IE：Elementfirefox：Node解决⽅法: 因为firefox与IE都⽀持DOM,因此使⽤Node是不错选择.(”itemName”) 问题问题说明：IE下，可以使⽤(”itemName”) 或ts [“elementName”];Firefox下，只能使⽤ts[“elementName”]。解决⽅法：统⼀使⽤ts[“elementName”]。9.集合类对象问题问题说明：IE下，可以使⽤ () 或 [] 获取集合类对象;Firefox下，只能使⽤ [ ]获取集合类对象。解决⽅法：统⼀使⽤ [] 获取集合类对象。10.⾃定义属性问题问题说明：IE下，可以使⽤获取常规属性的⽅法来获取⾃定义属性，也可以使⽤getAttribute() 获取⾃定义属性;Firefox下，只能使⽤getAttribute() 获取⾃定义属性。解决⽅法：统⼀通过getAttribute() 获取⾃定义属性。属性问题问题说明：IE下属性为只读;但是Firefox下属性为读写。解决办法：不修改属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插⼊⼀个新的input元素。ment问题问题说明：IE下，even对象有srcElement属性，但是没有target属性;Firefox下，even对象有target属性，但是没有srcElement属性。解决⽅法：使⽤srcObj = ment ?ment : ;如果考虑第8条问题，就改⽤myEvent代替event即可。载⼊问题问题说明：Firefox的body对象在body标签没有被浏览器完全读⼊之前就存在;⽽IE的body对象则必须在body标签被浏览器完全读⼊之后才存在。[注] 这个问题尚未实际验证，待验证后再来修改。[注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载⼊的所有对象和元素，即使这个元素还没有载⼊完成。14.事件委托⽅法问题说明：IE下，使⽤ = inject; 其中function inject()在这之前已被实现;在Firefox下，使⽤= inject();解决⽅法：统⼀使⽤=new Function(’inject()’); 或者 = function(){/* 这⾥是代码 */}[注意] Function和function的区别。操作问题问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使⽤js增加⼀个tr时，使⽤appendChild⽅法也不管⽤。解决⽅法：//向table追加⼀个空⾏：var row = Row(-1);var cell = Element(“td”);TML = “”;ame =“XXXX”;Child(cell);[注] 由于俺很少使⽤JS直接操作表格，这个问题没有遇见过。建议使⽤JS框架集来操作table，如JQuery。16.对象宽⾼赋值问题问题说明：FireFox中类似 = 的语句⽆效。 CSS&&html部分：:hand VS cursor:pointerfirefox不⽀持hand，但ie⽀持pointer解决⽅法: 统⼀使⽤ext在IE中能正常⼯作，但在FireFox中却不⾏.需⽤textContent。解决⽅法:if(f(“Explorer”) > -1){mentById(‘element’).innerText = “my text”;}else{mentById(‘element’).textContent = “my text”;}透明IE：filter:progid:(style=0,opacity=60)。FF：opacity:0.6。中的width和padding在IE7和FF中width宽度不包括padding，在Ie6中包括和IEBOX模型解释不⼀致导致相差{width:100;border 1px;}ie理解为 = 100ff理解为 = 100 + 1*2 = 102 //加上边框2px解决⽅法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序⼀定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后⼀个来执⾏，所以不可以只写margin:XXpx!important;5 和IE6的BOX解释不⼀致IE5下div{width:300px;margin:0 10px 0 10px;}div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，⽽在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空⽩以及列表编号或圆点，设置padding对样式没有影响;在 Firefox 中，设置margin:0px仅仅可以去除上下的空⽩，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，⽽在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。8.元素⽔平居中问题FF: margin:0 auto;IE: ⽗级{ text-align:center; }的垂直居中问题vertical-align:middle; 将⾏距增加到和整个DIV⼀样⾼：line-height:200px; 然后插⼊⽂字，就垂直居中了。缺点是要控制内容不要换⾏。加倍的问题设置为float的div在ie下设置的margin会加倍。这是⼀个ie6都存在的bug。解决⽅案是在这个div⾥⾯加上display:inline;例如：相应的css为#imfloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}与宽度和⾼度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就⼤了，如果只⽤宽度和⾼度，正常的浏览器⾥这两个值就不会变，如果只⽤min-width和min-height的话，IE下⾯根本等于没有设置宽度和⾼度。⽐如要设置背景图⽚，这个宽度是⽐较重要的。要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}12.页⾯的最⼩宽度如上⼀个问题，IE不识别min，要实现最⼩宽度，可⽤下⾯的⽅法：#container{ min-width: 600px; width:expression(Width< 600? “600px”: “auto” );}第⼀个min-width是正常的;但第2⾏的width使⽤了Javascript，这只有IE才认得，这也会让你的HTML⽂档不太正规。它实际上通过Javascript的判断来实现最⼩宽度。浮动IE⽂本产⽣3象素的bug左边对象浮动，右边采⽤外补丁的左边距来定位，右边对象内的⽂本会离左边有3px的间距.#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}捉迷藏的问题当div应⽤复杂的时候每个栏中⼜有⼀些链接，DIV等这个时候容易发⽣捉迷藏的问题。有些内容显⽰不出来，当⿏标选择这个区域是发现内容确实在页⾯。解决办法：对#layout使⽤line-height属性或者给#layout使⽤固定⾼和宽。页⾯结构尽量简单。的div闭合;清除浮动;⾃适应⾼度① 例如：这⾥的NOTfloatC并不希望继续平移，⽽是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)这段代码在IE中毫⽆问题，问题出在FF。原因是NOTfloatC并⾮float标签，必须将float标签闭合。在之间加上这个div⼀定要注意位置，⽽且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产⽣异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}②作为外部 wrapper 的 div 不要定死⾼度,为了让⾼度能⾃适应，要在wrapper⾥⾯加上overflow:hidden; 当包含float的box的时候，⾼度⾃适应在IE下⽆效，这时候应该触发IE的layout私有属性(万恶的IE啊!)⽤zoom:1;可以做到，这样就达到了兼容。例如某⼀个wrapper如下定义：.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}③对于排版,我们⽤得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后⾯做⼀个统⼀的背景,譬如:⽐如我们要将page的背景设置成蓝⾊,以达到所有三栏的背景颜⾊是蓝⾊的⽬的,但是我们会发现随着left center right的向下拉长,⽽page居然保存⾼度不变,问题来了,原因在于page不是float属性,⽽我们的page由于要居中,不能设置成float,所以我们应该这样解决：再嵌⼊⼀个float left⽽宽度是100%的DIV解决之。④万能float 闭合(⾮常重要!)关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加⼊Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽。/* Clear Fix */.clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }.clearfix { display:inline-block; }/* Hide from IE Mac */.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显⽰}16.⾼度不适应⾼度不适应是当内层对象的⾼度发⽣变化时外层⾼度不能⾃动进⾏调节，特别是当内层对象使⽤margin 或padding时。例：#box { }#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }p对象中的内容解决技巧：在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}或者为DIV加上border属性。6下图⽚下有空隙产⽣解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom 都可以解决.18.对齐⽂本与⽂本输⼊框加上vertical-align:middle;经验证，在IE下任⼀版本都不适⽤，⽽ff、opera、safari、chrome均OK!中内容超过长度后以省略号显⽰此技巧适⽤与IE、Opera、safari、chrom浏览器，FF暂不⽀持。20.为什么web标准中IE⽆法设置滚动条颜⾊了解决办法是将body换成html21.为什么⽆法定义1px左右⾼度的容器IE6下这个问题是因为默认的⾏⾼造成的,解决的技巧也有很多：例如:overflow:hidden　 zoom:0.08 　 line-height:1px22.怎么样才能让层显⽰在FLASH之上呢解决的办法是给FLASH设置透明23.链接(a标签)的边框与背景a链接加边框和背景⾊，需设置 display: block, 同时设置 float: left 保证不换⾏。参照menubar, 给 a 和menubar设置⾼度是为了避免底边显⽰错位, 若不设 height, 可以在menubar中插⼊⼀个空格。24.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多⼈应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-Alink:平常的状态visited:被访问过之后hover:⿏标放到链接上的时候active:链接被按下的时候标签这个标签在IE中,将会⾃动margin⼀些边距,⽽在FF中margin则是0,因此,如果想显⽰⼀致,所以最好在css中指定margin和 padding,针对上⾯两个问题,我的css中⼀般⾸先都使⽤这样的样式ul,form{margin:0;padding:0;}。26.属性选择器(这个不能算是兼容,是隐藏css的⼀个bug)p[id]{}div[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作⽤.属性选择器和⼦选择器还是有区别的,⼦选择器的范围从形式来说缩⼩了,属性选择器的范围⽐较⼤,如p[id]中,所有p标签中有id的都是同样式的.27.为什么FF下⽂本⽆法撑开容器的⾼度标准浏览器中固定⾼度值的容器是不会象IE6⾥那样被撑开的,那我⼜想固定⾼度,⼜想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这⾥为了照顾不认识min-height的IE6 可以这样定义:{height:auto!important;height:200px;min-height:200px;}移动端开发常见的兼容性问题1、安卓浏览器看背景图⽚，有些设备会模糊。⽤同等⽐例的图⽚在PC机上很清楚，但是⼿机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为⼿机分辨率太⼩，如果按照分辨率来显⽰⽹页，这样字会⾮常⼩，所以苹果当初就把iPhone 4的960640分辨率，在⽹页⾥只显⽰了480320，这样devicePixelRatio＝2。现在android⽐较乱，有1.5的，有2的也有3的。想让图⽚在⼿机⾥显⽰更为清晰，必须使⽤2x的背景图来代替img标签（⼀般情况都是⽤2倍）。例如⼀个div的宽⾼是100100，背景图必须得200200，然后background-size:contain;，这样显⽰出来的图⽚就⽐较清晰了。代码可以如下：background:url(../images/icon/) no-repeat center center;-webkit-background-size:50px 50px;background-size: 50px 50px;display:inline-block; width:100%; height:50px;或者指定 background-size:contain;都可以，⼤家试试！2、图⽚加载若您遇到图⽚加载很慢的问题，对这种情况，⼿机开发⼀般⽤canvas⽅法加载：下⾯举例说明⼀个canvas的例⼦：

js动态加载图⽚和li 总共举例17张图⽚！var total=17;var zWin=$(window);var render=function(){var padding=2;var winWidth=();var picWidth=((winWidth-padding*3)/4);var tmpl ='';for (var i=1;i<=totla;i++){var p=padding;var imgSrc='img/'+i+'.jpg';if(i%4==1){p=0;}tmpl +='

';var imageObj = new Image(); = i; = function(){var cvs =$('#cvs_'+)[0].getContext('2d'); = ;=;age(this,0,0);}=imgSrc;}}render();看了⼀下zeptio新版的API，已经⽀持IE10以上浏览器，对zeptojs可以选择使⽤！4、防⽌⼿机中⽹页放⼤和缩⼩，这点是最基本的，最为⼿机⽹站开发者来说应该都知道的，就是设置meta中的viewport还有就是，有些⼿机⽹站我们看到如下声明：复制代码 代码如下:设置了DTD的⽅式是XHTML的写法，假如我们页⾯运⽤的是html5，可以不⽤设置DTD,直接声明。使⽤viewport使页⾯禁⽌缩放。 通常把user-scalable设置为0来关闭⽤户对页⾯视图缩放的⾏为。但是为了更好的兼容，我们会使⽤完整的viewport设置。复制代码 代码如下:当然，user-scalable=0,有的⼈也写成user-scalable=no，都可以的。5、apple-mobile-web-app-capableapple-mobile-web-app-capable是设置Web应⽤是否以全屏模式运⾏。语法：说明：如果content设置为yes，Web应⽤会以全屏模式运⾏，反之，则不会。content的默认值是no，表⽰正常显⽰。你可以通过只读属性lone来确定⽹页是否以全屏模式显⽰。6、format-detectionformat-detection 启动或禁⽤⾃动识别页⾯中的电话号码。语法：说明：默认情况下，设备会⾃动识别任何可能是电话号码的字符串。设置telephone=no可以禁⽤这项功能。7、html5调⽤安卓或者ios的拨号功能html5提供了⾃动调⽤拨号的标签，只要在a标签的href中添加tel:就可以了。如下：400-810-6999 转 1034拨打⼿机直接如下点击拨打156****67678、html5GPS定位功能9、上下拉动滚动条时卡顿、慢body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}Android3+和iOS5+⽀持CSS3的新属性为overflow-scrolling10、禁⽌复制、选中⽂本Element {-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;}解决移动设备可选中页⾯⽂本(视产品需要⽽定)11、长时间按住页⾯出现闪退element {-webkit-touch-callout: none;}12、iphone及ipad下输⼊框默认内阴影Element{-webkit-appearance: none;}13、ios和android下触摸元素时出现半透明灰⾊遮罩Element {-webkit-tap-highlight-color:rgba(255,255,255,0)}设置alpha值为0就可以去除半透明灰⾊遮罩，备注：transparent的属性值在android下⽆效。14、active兼容处理 即 伪类 :active 失效⽅法⼀：body添加ontouchstart⽅法⼆：js给 document 绑定 touchstart 或 touchend 事件bar15、动画定义3D启⽤硬件加速Element {-webkit-transform:translate3d(0, 0, 0)transform: translate3d(0, 0, 0);}注意：3D变形会消耗更多的内存与功耗16、Retina屏的1px边框Element{border-width: thin;}17、webkit mask 兼容处理某些低端⼿机不⽀持css3 mask，可以选择性的降级处理。⽐如可以使⽤js判断来引⽤不同class：if( 'WebkitMask' in ){alert('⽀持mask');} else {alert('不⽀持mask');}18、旋转屏幕时，字体⼤⼩调整的问题html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:100%;}19、transition闪屏/设置内嵌的元素在 3D 空间如何呈现：保留3D /-webkit-transform-style: preserve-3d;/ 设置进⾏转换的元素的背⾯在⾯对⽤户时是否可见：隐藏 /-webkit-backface-visibility:hidden;20、圆⾓bug某些Android⼿机圆⾓失效background-clip: padding-box;21、顶部状态栏背景⾊说明：除⾮你先使⽤apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作⽤。如果content设置为default，则状态栏正常显⽰。如果设置为blank，则状态栏会有⼀个⿊⾊的背景。如果设置为blank-translucent，则状态栏显⽰为⿊⾊半透明。如果设置为default或blank，则页⾯显⽰在状态栏的下⽅，即状态栏占据上⽅部分，页⾯占据下⽅部分，⼆者没有遮挡对⽅或被遮挡。如果设置为blank-translucent，则页⾯会充满屏幕，其中页⾯顶部会被状态栏遮盖住（会覆盖页⾯20px⾼度，⽽iphone4和itouch4的Retina屏幕为40px）。默认值是default。22、设置缓存⼿机页⾯通常在第⼀次加载后会进⾏缓存，然后每次刷新会使⽤缓存⽽不是去重新向服务器发送请求。如果不希望使⽤缓存可以设置no-cache。23、桌⾯图标iOS下针对不同设备定义不同的桌⾯图标。如果不定义则以当前屏幕截图作为图标。上⾯的写法可能⼤家会觉得会有默认光泽，下⾯这种设置⽅法可以去掉光泽效果，还原设计图的效果！图⽚尺⼨可以设定为5757（px）或者Retina可以定为114114（px），ipad尺⼨为72*72（px)24、启动画⾯iOS下页⾯启动加载时显⽰的画⾯图⽚，避免加载时的⽩屏。可以通过madia来指定不同的⼤⼩：25、浏览器私有及其它meta以下属性在项⽬中没有应⽤过，可以写⼀个demo测试以下！QQ浏览器私有全屏模式强制竖屏强制横屏应⽤模式UC浏览器私有全屏模式强制竖屏强制横屏应⽤模式其它针对⼿持设备优化，主要是针对⼀些⽼的不识别viewport的浏览器，⽐如⿊莓微软的⽼式浏览器windows phone 点击⽆⾼光26、 IOS中input键盘事件keyup、keydown、keypress⽀持不是很好问题是这样的，⽤input search做模糊搜索的时候，在键盘⾥⾯输⼊关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进⾏关键词标红。⽤input监听键盘keyup事件，在安卓⼿机浏览器中是可以的，但是在ios⼿机浏览器中变红很慢，⽤输⼊法输⼊之后，并未⽴刻相应keyup事件，只有在通过删除之后才能相应！解决办法：可以⽤html5的oninput事件去代替keyup然后就达到类似keyup的效果！27、h5⽹站input 设置为type=number的问题h5⽹页input 的type设置为number⼀般会产⽣三个问题，⼀个问题是maxlength属性不好⽤了。另外⼀个是form提交的时候，默认给取整了。三是部分安卓⼿机出现样式问题。问题⼀解决，我⽬前⽤的是js。如下function checkTextLength(obj, length) {if( > length) { = (0, length);}}问题⼆，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位⼩数，写法如下：关于step，我在这⾥做简单的介绍，input 中type=number，⼀般会⾃动⽣成⼀个上下箭头，点击上箭头默认增加⼀个step，点击下箭头默认会减少⼀个step。number中默认step是1。也就是step=0.01,可以允许输⼊2位⼩数，并且点击上下箭头分别增加0.01和减少0.01。假如step和min⼀起使⽤，那么数值必须在min和max之间。看下⾯的例⼦：输⼊框可以输⼊哪些数字？⾸先，最⼩值是1，那么可以输⼊1.0，第⼆个是可以输⼊（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输⼊其他数字⽆效。这就是step的简单介绍。问题三，去除input默认样式input[type=number] {-moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}28、ios 设置input 按钮样式会被默认样式覆盖解决⽅式如下：input,textarea {border: 0;-webkit-appearance: none;}设置默认样式为none29、IOS键盘字母输⼊，默认⾸字母⼤写解决⽅案，设置如下属性30、select 下拉选择设置右对齐设置如下：select option {direction: rtl;}31、通过transform进⾏skew变形，rotate旋转会造成出现锯齿现象可以设置如下：-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);transform: rotate(-4deg) skew(10deg) translateZ(0);outline: 1px solid rgba(255,255,255,0)32、移动端点击300ms延迟300ms尚可接受，不过因为300ms产⽣的问题，我们必须要解决。300ms导致⽤户体验并不是很好，解决这个问题，我们⼀般在移动端⽤tap事件来取代click事件。推荐两个js，⼀个是fastclick，⼀个是33、移动端点透问题案例如下：

点头事件测试

div是绝对定位的蒙层,并且z-index⾼于a。⽽a标签是页⾯中的⼀个链接，我们给div绑定tap事件：$('#haorooms').on('tap',function(){$('#haorooms').hide();});我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。原因：touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间⼤概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下⾯的a链接上。解决：（1）尽量都使⽤touch事件来替换click事件。例如⽤touchend事件(推荐)。（3）⽤preventDefault阻⽌a标签的click（4）延迟⼀定的时间(300ms+)来处理事件 （不推荐）（5）以上⼀般都能解决，实在不⾏就换成click事件。下⾯介绍⼀下touchend事件，如下：$("#haorooms").on("touchend", function (event) {tDefault();});34、消除 IE10 ⾥⾯的那个叉号input:-ms-clear{display:none;}35、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不⼀致等)iOS 浏览器横屏时会重置字体⼤⼩，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌⾯版 Safari 的字体缩放功能会失效，因此最佳⽅案是将 text-size-adjust 为 100% 。-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-size-adjust: 100%;36、关于 iOS 系统中，中⽂输⼊法输⼊英⽂时，字母之间可能会出现⼀个六分之⼀空格可以通过正则去掉 = e(/u2006/g, '');37、移动端 HTML5 audio autoplay 失效问题这个不是 BUG，由于⾃动播放⽹页中的⾳频或视频，会给⽤户带来⼀些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁⽌⾃动播放和使⽤ JS 的触发播放，必须由⽤户来触发才可以播放。解决⽅法思路：先通过⽤户 touchstart 触碰，触发播放并暂停（⾳频开始加载，后⾯⽤ JS 再操作就没问题了）。解决代码：ntListener('touchstart', function () {mentsByTagName('audio')[0].play();mentsByTagName('audio')[0].pause();});38、移动端 HTML5 input date 不⽀持 placeholder 问题这个我感觉没有什么好的解决⽅案，⽤如下⽅法复制代码 代码如下:有的浏览器可能要点击两遍！39、部分机型存在type为search的input，⾃带close按钮样式修改⽅法有些机型的搜索input控件会⾃带close按钮（⼀个伪元素），⽽通常为了兼容所有浏览器，我们会⾃⼰实现⼀个，此时去掉原⽣close按钮的⽅法为#Search::-webkit-search-cancel-button{display: none;}如果想使⽤原⽣close按钮，⼜想使其符合设计风格，可以对这个伪元素的样式进⾏修改。40、唤起select的option展开zepto⽅式:$(sltElement).trrgger("mousedown");原⽣js⽅式:function showDropdown(sltElement) {var event;event = Event('MouseEvents');useEvent('mousedown', true, true, window);chEvent(event);};

2023年6月20日发(作者：)

浏览器兼容性（⼿机，电脑。jshtmlcss）javascript部分：对象获取问题FireFox：mentById(“idName”);ie:或者mentById(“idName”).解决办法：统⼀使⽤mentById(“idName”);问题说明:Firefox下,可以使⽤const关键字或var关键字来定义常量;IE下,只能使⽤var关键字来定义常量.解决⽅法：统⼀使⽤var关键字来定义常量..x与event.y问题说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.解决⽅法：使⽤mX(mX = event.x ? event.x : ;)来代替IE下的event.x或者Firefox下的问题说明:IE或者Firefox2.0.x下,可以使⽤on或;Firefox1.5.x下,只能使⽤on.解决⽅法：使⽤on来代替问题以下⾯的frame为例：(1)访问frame对象:IE:使⽤d或者ame来访问这个frame对象.frameId和frameName可以同名。Firefox:只能使⽤ame来访问这个frame对象.另外，在IE和Firefox中都可以使⽤mentById(“frameId”)来访问这个frame对象.(2)切换frame内容:在 IE和Firefox中都可以使⽤mentById(“testFrame”).src = “”或on =“”来切换frame的内容.如果需要将frame中的参数传回⽗窗⼝(注意不是opener,⽽是parent frame)，可以在frame中使⽤parent来访问⽗窗⼝。例如：=”Aqing”;6.模态和⾮模态窗⼝问题说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和⾮模态窗⼝;Firefox下则不能.解决⽅法：直接使⽤(pageURL,name,parameters)⽅式打开新窗⼝。如果需要将⼦窗⼝中的参数传递回⽗窗⼝,可以在⼦窗⼝中使⽤来访问⽗窗⼝.例如：var parWin = ; mentById(“Aqing”).value = “Aqing”;x与IE的⽗元素(parentElement)的区别IE：Elementfirefox：Node解决⽅法: 因为firefox与IE都⽀持DOM,因此使⽤Node是不错选择.(”itemName”) 问题问题说明：IE下，可以使⽤(”itemName”) 或ts [“elementName”];Firefox下，只能使⽤ts[“elementName”]。解决⽅法：统⼀使⽤ts[“elementName”]。9.集合类对象问题问题说明：IE下，可以使⽤ () 或 [] 获取集合类对象;Firefox下，只能使⽤ [ ]获取集合类对象。解决⽅法：统⼀使⽤ [] 获取集合类对象。10.⾃定义属性问题问题说明：IE下，可以使⽤获取常规属性的⽅法来获取⾃定义属性，也可以使⽤getAttribute() 获取⾃定义属性;Firefox下，只能使⽤getAttribute() 获取⾃定义属性。解决⽅法：统⼀通过getAttribute() 获取⾃定义属性。属性问题问题说明：IE下属性为只读;但是Firefox下属性为读写。解决办法：不修改属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插⼊⼀个新的input元素。ment问题问题说明：IE下，even对象有srcElement属性，但是没有target属性;Firefox下，even对象有target属性，但是没有srcElement属性。解决⽅法：使⽤srcObj = ment ?ment : ;如果考虑第8条问题，就改⽤myEvent代替event即可。载⼊问题问题说明：Firefox的body对象在body标签没有被浏览器完全读⼊之前就存在;⽽IE的body对象则必须在body标签被浏览器完全读⼊之后才存在。[注] 这个问题尚未实际验证，待验证后再来修改。[注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载⼊的所有对象和元素，即使这个元素还没有载⼊完成。14.事件委托⽅法问题说明：IE下，使⽤ = inject; 其中function inject()在这之前已被实现;在Firefox下，使⽤= inject();解决⽅法：统⼀使⽤=new Function(’inject()’); 或者 = function(){/* 这⾥是代码 */}[注意] Function和function的区别。操作问题问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使⽤js增加⼀个tr时，使⽤appendChild⽅法也不管⽤。解决⽅法：//向table追加⼀个空⾏：var row = Row(-1);var cell = Element(“td”);TML = “”;ame =“XXXX”;Child(cell);[注] 由于俺很少使⽤JS直接操作表格，这个问题没有遇见过。建议使⽤JS框架集来操作table，如JQuery。16.对象宽⾼赋值问题问题说明：FireFox中类似 = 的语句⽆效。 CSS&&html部分：:hand VS cursor:pointerfirefox不⽀持hand，但ie⽀持pointer解决⽅法: 统⼀使⽤ext在IE中能正常⼯作，但在FireFox中却不⾏.需⽤textContent。解决⽅法:if(f(“Explorer”) > -1){mentById(‘element’).innerText = “my text”;}else{mentById(‘element’).textContent = “my text”;}透明IE：filter:progid:(style=0,opacity=60)。FF：opacity:0.6。中的width和padding在IE7和FF中width宽度不包括padding，在Ie6中包括和IEBOX模型解释不⼀致导致相差{width:100;border 1px;}ie理解为 = 100ff理解为 = 100 + 1*2 = 102 //加上边框2px解决⽅法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序⼀定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后⼀个来执⾏，所以不可以只写margin:XXpx!important;5 和IE6的BOX解释不⼀致IE5下div{width:300px;margin:0 10px 0 10px;}div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，⽽在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空⽩以及列表编号或圆点，设置padding对样式没有影响;在 Firefox 中，设置margin:0px仅仅可以去除上下的空⽩，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，⽽在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。8.元素⽔平居中问题FF: margin:0 auto;IE: ⽗级{ text-align:center; }的垂直居中问题vertical-align:middle; 将⾏距增加到和整个DIV⼀样⾼：line-height:200px; 然后插⼊⽂字，就垂直居中了。缺点是要控制内容不要换⾏。加倍的问题设置为float的div在ie下设置的margin会加倍。这是⼀个ie6都存在的bug。解决⽅案是在这个div⾥⾯加上display:inline;例如：相应的css为#imfloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}与宽度和⾼度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就⼤了，如果只⽤宽度和⾼度，正常的浏览器⾥这两个值就不会变，如果只⽤min-width和min-height的话，IE下⾯根本等于没有设置宽度和⾼度。⽐如要设置背景图⽚，这个宽度是⽐较重要的。要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}12.页⾯的最⼩宽度如上⼀个问题，IE不识别min，要实现最⼩宽度，可⽤下⾯的⽅法：#container{ min-width: 600px; width:expression(Width< 600? “600px”: “auto” );}第⼀个min-width是正常的;但第2⾏的width使⽤了Javascript，这只有IE才认得，这也会让你的HTML⽂档不太正规。它实际上通过Javascript的判断来实现最⼩宽度。浮动IE⽂本产⽣3象素的bug左边对象浮动，右边采⽤外补丁的左边距来定位，右边对象内的⽂本会离左边有3px的间距.#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}捉迷藏的问题当div应⽤复杂的时候每个栏中⼜有⼀些链接，DIV等这个时候容易发⽣捉迷藏的问题。有些内容显⽰不出来，当⿏标选择这个区域是发现内容确实在页⾯。解决办法：对#layout使⽤line-height属性或者给#layout使⽤固定⾼和宽。页⾯结构尽量简单。的div闭合;清除浮动;⾃适应⾼度① 例如：这⾥的NOTfloatC并不希望继续平移，⽽是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)这段代码在IE中毫⽆问题，问题出在FF。原因是NOTfloatC并⾮float标签，必须将float标签闭合。在之间加上这个div⼀定要注意位置，⽽且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产⽣异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}②作为外部 wrapper 的 div 不要定死⾼度,为了让⾼度能⾃适应，要在wrapper⾥⾯加上overflow:hidden; 当包含float的box的时候，⾼度⾃适应在IE下⽆效，这时候应该触发IE的layout私有属性(万恶的IE啊!)⽤zoom:1;可以做到，这样就达到了兼容。例如某⼀个wrapper如下定义：.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}③对于排版,我们⽤得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后⾯做⼀个统⼀的背景,譬如:⽐如我们要将page的背景设置成蓝⾊,以达到所有三栏的背景颜⾊是蓝⾊的⽬的,但是我们会发现随着left center right的向下拉长,⽽page居然保存⾼度不变,问题来了,原因在于page不是float属性,⽽我们的page由于要居中,不能设置成float,所以我们应该这样解决：再嵌⼊⼀个float left⽽宽度是100%的DIV解决之。④万能float 闭合(⾮常重要!)关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加⼊Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽。/* Clear Fix */.clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }.clearfix { display:inline-block; }/* Hide from IE Mac */.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显⽰}16.⾼度不适应⾼度不适应是当内层对象的⾼度发⽣变化时外层⾼度不能⾃动进⾏调节，特别是当内层对象使⽤margin 或padding时。例：#box { }#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }p对象中的内容解决技巧：在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}或者为DIV加上border属性。6下图⽚下有空隙产⽣解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom 都可以解决.18.对齐⽂本与⽂本输⼊框加上vertical-align:middle;经验证，在IE下任⼀版本都不适⽤，⽽ff、opera、safari、chrome均OK!中内容超过长度后以省略号显⽰此技巧适⽤与IE、Opera、safari、chrom浏览器，FF暂不⽀持。20.为什么web标准中IE⽆法设置滚动条颜⾊了解决办法是将body换成html21.为什么⽆法定义1px左右⾼度的容器IE6下这个问题是因为默认的⾏⾼造成的,解决的技巧也有很多：例如:overflow:hidden　 zoom:0.08 　 line-height:1px22.怎么样才能让层显⽰在FLASH之上呢解决的办法是给FLASH设置透明23.链接(a标签)的边框与背景a链接加边框和背景⾊，需设置 display: block, 同时设置 float: left 保证不换⾏。参照menubar, 给 a 和menubar设置⾼度是为了避免底边显⽰错位, 若不设 height, 可以在menubar中插⼊⼀个空格。24.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多⼈应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-Alink:平常的状态visited:被访问过之后hover:⿏标放到链接上的时候active:链接被按下的时候标签这个标签在IE中,将会⾃动margin⼀些边距,⽽在FF中margin则是0,因此,如果想显⽰⼀致,所以最好在css中指定margin和 padding,针对上⾯两个问题,我的css中⼀般⾸先都使⽤这样的样式ul,form{margin:0;padding:0;}。26.属性选择器(这个不能算是兼容,是隐藏css的⼀个bug)p[id]{}div[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作⽤.属性选择器和⼦选择器还是有区别的,⼦选择器的范围从形式来说缩⼩了,属性选择器的范围⽐较⼤,如p[id]中,所有p标签中有id的都是同样式的.27.为什么FF下⽂本⽆法撑开容器的⾼度标准浏览器中固定⾼度值的容器是不会象IE6⾥那样被撑开的,那我⼜想固定⾼度,⼜想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这⾥为了照顾不认识min-height的IE6 可以这样定义:{height:auto!important;height:200px;min-height:200px;}移动端开发常见的兼容性问题1、安卓浏览器看背景图⽚，有些设备会模糊。⽤同等⽐例的图⽚在PC机上很清楚，但是⼿机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为⼿机分辨率太⼩，如果按照分辨率来显⽰⽹页，这样字会⾮常⼩，所以苹果当初就把iPhone 4的960640分辨率，在⽹页⾥只显⽰了480320，这样devicePixelRatio＝2。现在android⽐较乱，有1.5的，有2的也有3的。想让图⽚在⼿机⾥显⽰更为清晰，必须使⽤2x的背景图来代替img标签（⼀般情况都是⽤2倍）。例如⼀个div的宽⾼是100100，背景图必须得200200，然后background-size:contain;，这样显⽰出来的图⽚就⽐较清晰了。代码可以如下：background:url(../images/icon/) no-repeat center center;-webkit-background-size:50px 50px;background-size: 50px 50px;display:inline-block; width:100%; height:50px;或者指定 background-size:contain;都可以，⼤家试试！2、图⽚加载若您遇到图⽚加载很慢的问题，对这种情况，⼿机开发⼀般⽤canvas⽅法加载：下⾯举例说明⼀个canvas的例⼦：

js动态加载图⽚和li 总共举例17张图⽚！var total=17;var zWin=$(window);var render=function(){var padding=2;var winWidth=();var picWidth=((winWidth-padding*3)/4);var tmpl ='';for (var i=1;i<=totla;i++){var p=padding;var imgSrc='img/'+i+'.jpg';if(i%4==1){p=0;}tmpl +='

';var imageObj = new Image(); = i; = function(){var cvs =$('#cvs_'+)[0].getContext('2d'); = ;=;age(this,0,0);}=imgSrc;}}render();看了⼀下zeptio新版的API，已经⽀持IE10以上浏览器，对zeptojs可以选择使⽤！4、防⽌⼿机中⽹页放⼤和缩⼩，这点是最基本的，最为⼿机⽹站开发者来说应该都知道的，就是设置meta中的viewport还有就是，有些⼿机⽹站我们看到如下声明：复制代码 代码如下:设置了DTD的⽅式是XHTML的写法，假如我们页⾯运⽤的是html5，可以不⽤设置DTD,直接声明。使⽤viewport使页⾯禁⽌缩放。 通常把user-scalable设置为0来关闭⽤户对页⾯视图缩放的⾏为。但是为了更好的兼容，我们会使⽤完整的viewport设置。复制代码 代码如下:当然，user-scalable=0,有的⼈也写成user-scalable=no，都可以的。5、apple-mobile-web-app-capableapple-mobile-web-app-capable是设置Web应⽤是否以全屏模式运⾏。语法：说明：如果content设置为yes，Web应⽤会以全屏模式运⾏，反之，则不会。content的默认值是no，表⽰正常显⽰。你可以通过只读属性lone来确定⽹页是否以全屏模式显⽰。6、format-detectionformat-detection 启动或禁⽤⾃动识别页⾯中的电话号码。语法：说明：默认情况下，设备会⾃动识别任何可能是电话号码的字符串。设置telephone=no可以禁⽤这项功能。7、html5调⽤安卓或者ios的拨号功能html5提供了⾃动调⽤拨号的标签，只要在a标签的href中添加tel:就可以了。如下：400-810-6999 转 1034拨打⼿机直接如下点击拨打156****67678、html5GPS定位功能9、上下拉动滚动条时卡顿、慢body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch;}Android3+和iOS5+⽀持CSS3的新属性为overflow-scrolling10、禁⽌复制、选中⽂本Element {-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;}解决移动设备可选中页⾯⽂本(视产品需要⽽定)11、长时间按住页⾯出现闪退element {-webkit-touch-callout: none;}12、iphone及ipad下输⼊框默认内阴影Element{-webkit-appearance: none;}13、ios和android下触摸元素时出现半透明灰⾊遮罩Element {-webkit-tap-highlight-color:rgba(255,255,255,0)}设置alpha值为0就可以去除半透明灰⾊遮罩，备注：transparent的属性值在android下⽆效。14、active兼容处理 即 伪类 :active 失效⽅法⼀：body添加ontouchstart⽅法⼆：js给 document 绑定 touchstart 或 touchend 事件bar15、动画定义3D启⽤硬件加速Element {-webkit-transform:translate3d(0, 0, 0)transform: translate3d(0, 0, 0);}注意：3D变形会消耗更多的内存与功耗16、Retina屏的1px边框Element{border-width: thin;}17、webkit mask 兼容处理某些低端⼿机不⽀持css3 mask，可以选择性的降级处理。⽐如可以使⽤js判断来引⽤不同class：if( 'WebkitMask' in ){alert('⽀持mask');} else {alert('不⽀持mask');}18、旋转屏幕时，字体⼤⼩调整的问题html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:100%;}19、transition闪屏/设置内嵌的元素在 3D 空间如何呈现：保留3D /-webkit-transform-style: preserve-3d;/ 设置进⾏转换的元素的背⾯在⾯对⽤户时是否可见：隐藏 /-webkit-backface-visibility:hidden;20、圆⾓bug某些Android⼿机圆⾓失效background-clip: padding-box;21、顶部状态栏背景⾊说明：除⾮你先使⽤apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作⽤。如果content设置为default，则状态栏正常显⽰。如果设置为blank，则状态栏会有⼀个⿊⾊的背景。如果设置为blank-translucent，则状态栏显⽰为⿊⾊半透明。如果设置为default或blank，则页⾯显⽰在状态栏的下⽅，即状态栏占据上⽅部分，页⾯占据下⽅部分，⼆者没有遮挡对⽅或被遮挡。如果设置为blank-translucent，则页⾯会充满屏幕，其中页⾯顶部会被状态栏遮盖住（会覆盖页⾯20px⾼度，⽽iphone4和itouch4的Retina屏幕为40px）。默认值是default。22、设置缓存⼿机页⾯通常在第⼀次加载后会进⾏缓存，然后每次刷新会使⽤缓存⽽不是去重新向服务器发送请求。如果不希望使⽤缓存可以设置no-cache。23、桌⾯图标iOS下针对不同设备定义不同的桌⾯图标。如果不定义则以当前屏幕截图作为图标。上⾯的写法可能⼤家会觉得会有默认光泽，下⾯这种设置⽅法可以去掉光泽效果，还原设计图的效果！图⽚尺⼨可以设定为5757（px）或者Retina可以定为114114（px），ipad尺⼨为72*72（px)24、启动画⾯iOS下页⾯启动加载时显⽰的画⾯图⽚，避免加载时的⽩屏。可以通过madia来指定不同的⼤⼩：25、浏览器私有及其它meta以下属性在项⽬中没有应⽤过，可以写⼀个demo测试以下！QQ浏览器私有全屏模式强制竖屏强制横屏应⽤模式UC浏览器私有全屏模式强制竖屏强制横屏应⽤模式其它针对⼿持设备优化，主要是针对⼀些⽼的不识别viewport的浏览器，⽐如⿊莓微软的⽼式浏览器windows phone 点击⽆⾼光26、 IOS中input键盘事件keyup、keydown、keypress⽀持不是很好问题是这样的，⽤input search做模糊搜索的时候，在键盘⾥⾯输⼊关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进⾏关键词标红。⽤input监听键盘keyup事件，在安卓⼿机浏览器中是可以的，但是在ios⼿机浏览器中变红很慢，⽤输⼊法输⼊之后，并未⽴刻相应keyup事件，只有在通过删除之后才能相应！解决办法：可以⽤html5的oninput事件去代替keyup然后就达到类似keyup的效果！27、h5⽹站input 设置为type=number的问题h5⽹页input 的type设置为number⼀般会产⽣三个问题，⼀个问题是maxlength属性不好⽤了。另外⼀个是form提交的时候，默认给取整了。三是部分安卓⼿机出现样式问题。问题⼀解决，我⽬前⽤的是js。如下function checkTextLength(obj, length) {if( > length) { = (0, length);}}问题⼆，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位⼩数，写法如下：关于step，我在这⾥做简单的介绍，input 中type=number，⼀般会⾃动⽣成⼀个上下箭头，点击上箭头默认增加⼀个step，点击下箭头默认会减少⼀个step。number中默认step是1。也就是step=0.01,可以允许输⼊2位⼩数，并且点击上下箭头分别增加0.01和减少0.01。假如step和min⼀起使⽤，那么数值必须在min和max之间。看下⾯的例⼦：输⼊框可以输⼊哪些数字？⾸先，最⼩值是1，那么可以输⼊1.0，第⼆个是可以输⼊（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输⼊其他数字⽆效。这就是step的简单介绍。问题三，去除input默认样式input[type=number] {-moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}28、ios 设置input 按钮样式会被默认样式覆盖解决⽅式如下：input,textarea {border: 0;-webkit-appearance: none;}设置默认样式为none29、IOS键盘字母输⼊，默认⾸字母⼤写解决⽅案，设置如下属性30、select 下拉选择设置右对齐设置如下：select option {direction: rtl;}31、通过transform进⾏skew变形，rotate旋转会造成出现锯齿现象可以设置如下：-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);transform: rotate(-4deg) skew(10deg) translateZ(0);outline: 1px solid rgba(255,255,255,0)32、移动端点击300ms延迟300ms尚可接受，不过因为300ms产⽣的问题，我们必须要解决。300ms导致⽤户体验并不是很好，解决这个问题，我们⼀般在移动端⽤tap事件来取代click事件。推荐两个js，⼀个是fastclick，⼀个是33、移动端点透问题案例如下：

点头事件测试

div是绝对定位的蒙层,并且z-index⾼于a。⽽a标签是页⾯中的⼀个链接，我们给div绑定tap事件：$('#haorooms').on('tap',function(){$('#haorooms').hide();});我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件。原因：touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的，这个时间⼤概在300ms左右，也就是说我们tap触发之后蒙层隐藏， 此时 click还没有触发，300ms之后由于蒙层隐藏，我们的click触发到了下⾯的a链接上。解决：（1）尽量都使⽤touch事件来替换click事件。例如⽤touchend事件(推荐)。（3）⽤preventDefault阻⽌a标签的click（4）延迟⼀定的时间(300ms+)来处理事件 （不推荐）（5）以上⼀般都能解决，实在不⾏就换成click事件。下⾯介绍⼀下touchend事件，如下：$("#haorooms").on("touchend", function (event) {tDefault();});34、消除 IE10 ⾥⾯的那个叉号input:-ms-clear{display:none;}35、关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不⼀致等)iOS 浏览器横屏时会重置字体⼤⼩，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌⾯版 Safari 的字体缩放功能会失效，因此最佳⽅案是将 text-size-adjust 为 100% 。-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-size-adjust: 100%;36、关于 iOS 系统中，中⽂输⼊法输⼊英⽂时，字母之间可能会出现⼀个六分之⼀空格可以通过正则去掉 = e(/u2006/g, '');37、移动端 HTML5 audio autoplay 失效问题这个不是 BUG，由于⾃动播放⽹页中的⾳频或视频，会给⽤户带来⼀些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁⽌⾃动播放和使⽤ JS 的触发播放，必须由⽤户来触发才可以播放。解决⽅法思路：先通过⽤户 touchstart 触碰，触发播放并暂停（⾳频开始加载，后⾯⽤ JS 再操作就没问题了）。解决代码：ntListener('touchstart', function () {mentsByTagName('audio')[0].play();mentsByTagName('audio')[0].pause();});38、移动端 HTML5 input date 不⽀持 placeholder 问题这个我感觉没有什么好的解决⽅案，⽤如下⽅法复制代码 代码如下:有的浏览器可能要点击两遍！39、部分机型存在type为search的input，⾃带close按钮样式修改⽅法有些机型的搜索input控件会⾃带close按钮（⼀个伪元素），⽽通常为了兼容所有浏览器，我们会⾃⼰实现⼀个，此时去掉原⽣close按钮的⽅法为#Search::-webkit-search-cancel-button{display: none;}如果想使⽤原⽣close按钮，⼜想使其符合设计风格，可以对这个伪元素的样式进⾏修改。40、唤起select的option展开zepto⽅式:$(sltElement).trrgger("mousedown");原⽣js⽅式:function showDropdown(sltElement) {var event;event = Event('MouseEvents');useEvent('mousedown', true, true, window);chEvent(event);};