浏览器兼容性

　众所周知，目前市场上 最火的五大浏览器 是：google chrome、firefox（FF）、Internet Explorer（IE）、safari、opera。 　　 　他们相对应的 内核 是什么呢？ 　　 谷歌浏览器 ：Google Chrome，谷歌浏览器之前一直使用苹果的webkit内核，但是现在它与苹果内核分道扬镳，自己开创了新的blink内核，这个内核也在被欧鹏（opera浏览器）共同采用和开发； 　　 火狐浏览器 ：Mozilla Firefox ，内核是Gecko； 　　 opera浏览器 ：内核是blink； 　　 Safari浏览器 ：使用的是苹果公司自己的内核webkit； 　　 IE浏览器： 微软出品的浏览器，IE4以上版本都是Trident内核。由于垄断性，IE在很长一段时间内没有更新，导致两个后果：一是IE与W3C标准脱节，二是Trident内核大量的bug问题没得到及时解决。所以这就给了其他浏览器机会，比如firefox等。也正是这些原因，使Web前端开发人员大费周折，特别是IE6正处在新旧交替的关键地方（已经逐渐被舍弃）。 　　当然除了这五大浏览器之外，市场上还有很多，例如： 　　 搜狗浏览器 ：兼容模式（IE：Trident）和高速模式（webkit）； 　　 遨游浏览器 ：兼容模式（IE：Trident）和高速模式（webkit）； 　　

1. 兼容性问题的根本因素 浏览器最重要或者说核心的部分是 “Rendering Engine” ，可大概译为 “ 渲染引擎 ” ，所谓的浏览器内核也就是浏览器所采用的 渲染引擎 ，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。 前段时间进行了前端网页的 bug 修改，发现多数的 bug 均发生在 IE8 浏览器上，经过查证发现： IE8 的 JavaScript 引擎是 Jscript ， IE9 开始用 Chakra ，这两个版本区别很大，这就造成了 IE8 对于个别属性、方法的不支持或是显示效果上的差异，这里是我遇到的一些 IE8 上比较典型的兼容性问题及其解决办法。 2. indexOf 1 2 2.1 问题 前端代码中有多处地方使用 javascript 数组的 indexOf 方法，用于查询某数组中是否存在某元素，然而测试，在 IE8 不支持数组元素的 indexOf （）方法。如下 var location = ['1','2','3']; var serverData = [‘1’ , ’4’, ‘5’]; for( var i = 0; i < serverData.length;

1. 判断IE浏览器版本 // 获取IE版本 function IEVersion() { // 取得浏览器的userAgent字符串 var userAgent = navigator.userAgent; // 判断是否为小于IE11的浏览器 var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1; // 判断是否为IE的Edge浏览器 var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11; // 判断是否为IE11浏览器 var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1; if (isLessIE11) { var IEReg = new RegExp('MSIE (\\d+\\.\\d+);'); // 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分，，这一步不可省略！！！ IEReg.test(userAgent); // 取正则表达式中第一个小括号里匹配到的值 var IEVersionNum = parseFloat(RegExp['$1']);

警句：珍爱生命，远离IE 很多时候，我们会想要设置容器的最小宽度或最大宽度，但IE6不支持min-width、max-width属性怎么办？ 别着急，跟着我慢慢来，会让你捉急的还很多呢 首先我们来看看标准属性min-width、max-width效果如何： .ie-hack { min-width: 100px; max-width: 200px; } <div class="ie-hack">LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL</div> <div class="ie-hack">s</div> （图1-1 正常浏览器） （图1-2 IE6） 咦，好像不是预期的结果 哦，原来是block的原因。那我们改用inline-block吧： .ie-hack { min-width: 100px; max-width: 200px; display: inline-block; } <span class="ie-hack">LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL</span> <br> <span class="ie-hack">s</span> （图2-1 正常浏览器） （图2-2 IE6） 哦啦，正常浏览器的宽度限制实现了，那现在我们来解决IE6的问题 这里用只有IE6才识别的

1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时: 我们一般通过这两个方法获取行外样式： IE下: currentStyle Chrome,FF下: getComputedStyle(oDiv,false) 兼容两个浏览器的写法: if(oDiv.currentStyle){ alert(oDiv.currentStyle.width); }else{ alert(getComputedStyle(oDiv,false).width); } *注:在解决很多兼容性写法时,都是用if..else.. 封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本IE6,7) funtion getStyle(obj,name){ if(obj.currentStyle){ //IE return obj.currentStyle[name]; }else{ //Chrom,FF return getComputedStyle(obj,false)[name]; } } 调用：getStyle(oDiv,'width'); 2.关于用“索引”获取字符串每一项出现的兼容性问题: 对于字符串也有类似于 数组 这样的通过 下标索引 获取每一项的值, var str=

目录 1.Web链接概述 1.1 什么是超文本、超文本标记语言、超文本传输协议、超链接 1.2 超链接分类 1.3超链接测试目标 1.4死链接工具xenu 1.5Xenu检测过程 1.6 Xenu检测报告 1.7 执行步骤 2.兼容性测试 2.1 浏览器统计使用：https://tongji.baidu.com/research/site 2.2 浏览器测试方法 2.3 浏览器兼容性 2.4 浏览器兼容性测试点 2.5 浏览器兼容性测试工具 1.Web链接概述 1.1 什么是超文本、超文本标记语言、超文本传输协议、超链接 超文本(HyperText)：是超级文本的中文缩写。将各种不同空间的(文字、图片、视频、电子邮件) 信息组织 在一起的网状文本。 超文本标记语言(HTML)：就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素，标记（标签）构成的语言。 超文本传输协议(HTTP):是一个简单的请求-响应协议，它通常运行在TCP之上。 超链接(HL):某超文本文档中的元素，与另一个超文本、文件或脚本的不同元素之间的连接。 1.2 超链接分类 1.3超链接测试目标 测试所有链接是否按照指示的那样确实链接到了该链接的页面 测试所链接的页面是否存在 确保Web应用系统上没有孤立的页面存在 1.4死链接工具xenu 免费 简单，简洁的用户界面 小，可执行文件小于1MB 支持SSL网站

浏览器差异 1、ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效，padding属性对FireFox有效。 [注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。 当li使用了float:left属性，记得使用clear：both来处理典型的错位问题 2、CSS透明问题IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)FF：opacity:0.6。 [注] 最好两个都写，并将opacity属性放在下面。 3、CSS圆角问题IE：ie7以下版本不支持圆角。 FF： -moz-border-radius:4px，或者

1、兼容性 根据canius（http://caniuse.com/#search=transition），transition 兼容性如下图所示： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div 6 { 7 width:100px; 8 height:100px; 9 background:blue; 10 transition:width 2s; 11 -moz-transition:width 2s; /* Firefox 4 */ 12 -webkit-transition:width 2s; /* Safari and Chrome */ 13 -o-transition:width 2s; /* Opera */ 14 } 15 16 div:hover 17 { 18 width:300px; 19 } 20 </style> 21 </head> 22 <body> 23 24 <div></div> 25 26 <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p> 27 28 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> 29 30 </body> 31 </html> 在IE7-9进行测试时，transition的效果没有过渡效果

闲来无事，整理下目前常见的移动端页面布局。主要有流式布局、响应式布局、固定宽度做法、设置viewport进行缩放、rem等比例适配等。下文只是个人及网络上对各布局的看法，如有不当之处或其它方法，可回复。 1、流式布局 流式布局的解决方案有不少弊端，它虽然可以让各种屏幕都适配，但是显示的效果极其的不好，因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果。在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下 显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看 到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。 流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。 2、固定宽度做法 还有一种是固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计 灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题

1. 什么时候需要做浏览器兼容性测试? 用户有要求，指定浏览器需求 (环境:浏览器: ie8 ie9火狐) 网站一般都需要做兼容，用户使用量+内核来看，选取主流浏览器4-5浏览器 2. 一般兼容性测试是怎么来做的? 兼容性测试内容:主要测试是页面的格式、字体、输入框、下拉框、复选康、按钮等检查，：页面显示正常，在对功能进行中检查 来源： https://www.cnblogs.com/shouhu/p/12175260.html