浏览器兼容性 | 易学教程

注册事件

阅读更多关于注册事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="按钮" id="btn">  <script> var btn = document.getElementById('btn'); // 注册事件的第一种方式 // 无法给同一个对象的同一个事件注册多个事件处理函数 btn.onclick = function () { } btn.onclick = function () { } // 浏览器兼容性问题 IE9以后才支持 btn.addEventListener('click', function () { alert('hello world'); }) btn.addEventListener('click', function () { alert('hello itheima'); }) // 注册事件的第三种方式 attachEvent // 浏览器兼容性问题 IE的老版本特有的方法 IE6-10支持 </script

node面试题之---对比JS和NodeJS的区别

阅读更多关于 node面试题之---对比JS和NodeJS的区别

1.JS运行在浏览器端，用于用户的交互效果，NodeJS运行在服务器端，用于服务器的操作，例如，Web服务器创建，数据库的操作，文件的操作等 2.JS运行在浏览器端，存在多个JS解释器，存在兼容性的问题，而NodeJS只有V8引擎一种解释器，不存在兼容性问题 3.两者都有内置对象，自定义对象，有不同的宿主对象来源： https://www.cnblogs.com/snowbxb/p/11412126.html

测试--web应用与APP的区别

阅读更多关于测试--web应用与APP的区别

1、web应用为B/S模式，APP为C/S模式；H5应用通过浏览器访问，升级只需要服务器更新，并且每个用户看到的版本是相同的；APP需要服务器与客户端同时做相应的更新，并且不能保证每个用户的版本相同； 2、web应用特殊关注点：（1）兼容性：不同浏览器间的兼容，常关注的有：IE（不同操作系统）、Chrome、Firefox ；兼容性又分为功能和界面的兼容（2）操作：tab键、刷新、返回、前进（3）同一个浏览器打开两次应用之间的影响（cookie）：是否支持一个账号多个设备登录（4）不同浏览器间同时打开应用之间的影响（cookie）（5）链接测试：直接复制链接打开（6）H5应用与原生APP间的联系 3、APP特殊关注点：（1）兼容性：不同设备，不同操作系统，不同分辨率（2）安装卸载（3）推送通知测试（4）应用后台操作（5）特殊情况：断网、弱网（2G/3G/4G/WiFi）、来电、短信、不同应用间相互影响（如微信的视频通话）、横竖屏操作、手势来源： CSDN 作者： carandcat 链接： https://blog.csdn.net/carandcat/article/details/83787697

前端常见浏览器兼容性问题解决方案

阅读更多关于前端常见浏览器兼容性问题解决方案

不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。常见的浏览器内核：不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。 1.不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100% 解决方案：CSS里 *{margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。 2.块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大问题症状:常见症状是IE6中后面的一块被顶到下一行碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。 3.设置较小高度标签（一般小于10px），在IE6

前端常见浏览器兼容性问题

阅读更多关于前端常见浏览器兼容性问题

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同解决方案： css 里增加通配符 * { margin: 0; padding: 0; } 2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题解决方案：设置display:inline; 3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度 4、图片默认有间距解决方案：使用float 为img 布局 5、IE9一下浏览器不能使用opacity 解决方案： opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); 6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden； 7、cursor:hand 显示手型在safari 上不支持解决方案：统一使用 cursor:pointer 8、两个块级元素

主流浏览器CSS3和HTML5兼容性详细清单

阅读更多关于主流浏览器CSS3和HTML5兼容性详细清单

天极网软件频道 2011-05-26 15:26 分享到：我要吐槽　　更多精彩相关文章推荐：　　常用浏览器软件HTML5兼容性表现测试　　 IE和Firefox浏览器CSS兼容性技巧整理　　 CSS hack定义技巧浏览器兼容一览表　　浏览器Html5test基准测试成绩公布　　点击查看更多软件资讯>> 　　各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善，曾经让多少前端开发人员心碎的IE系也开始拥抱标准。就在前几天，W3C的 HTML5 社区领袖 Shelley 宣布，HTML5的开发工作已经接近完成，如果进展顺利，HTML5 将在 2012 年正式成为国际标准。　　当然，即使标准正式制定了，现代浏览器要普及到大部分用户也是需要一个相当漫长的过程。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点，需要对各个浏览器对这两种新技术的支持情况有一个全面了解。　　findmebyip.com给出了一份IE， Chrome ，Firefox， Safari ，Opera 五大主流大浏览器对CSS3 和 HTML5 各种特性支持情况的详细清单，含Mac 和 Windows 两个平台。　　 CSS3 属性　　从表中可以看出，CSS Transforms 3D 还没有浏览器支持，除此之外的其它属性在 Windows 平台，Chrome 和

浏览器的兼容性问题（移动端和pc端）

阅读更多关于浏览器的兼容性问题（移动端和pc端）

浏览器兼容是从三大方面来说的，分别为html，css，javaScript这三大方面来说的。如下图: 移动端 1. IOS移动端click事件300ms的延迟响应移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的, 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接a标签，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转

常见的浏览器兼容性问题总结

阅读更多关于常见的浏览器兼容性问题总结

1. 不同浏览器的标签默认外补丁margin和内补丁padding不同发生概率：100% 解决方案：使用CSS通配符*，设置内外补丁为0 *{ margin: 0; padding: 0;} 2. 块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug）发生概率：90% 解决方案：在float标签样式控制中加入display:inline; 3. 设置较小的高度标签（一般小于10px），在IE6，IE7，遨游中超出自己设置的高度发生概率：60% 解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。 4. 行内标签设置display:block;后又采用float布局，再设置横向margin值时，在IE6中显示会比设置的大（IE6双边距bug）发生概率：20% 解决方案：在display:block;后面加上display:inline;display:table; 5. 图片默认有间距发生概率：20% 解决方案：使用float为img布局 6. 标签最低高度设置min-height不兼容发生概率：5% 解决方案：例如要设置一个标签的最小高度为200px { min-height: 200px; height: auto!important; height:

订阅浏览器兼容性