浏览器兼容性

随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题， 1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。 想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100*100，背景图必须得200*200，然后background-size:contain;，这样显示出来的图片就比较清晰了。 代码可以如下： background:url(../images/icon/all.png) no-repeat center center; -webkit-background-size:50px 50px; background-size: 50px 50px;display:inline-block; width:100%; height:50px; 或者指定 background-size:contain;都可以，大家试试！ 2、图片加载

前言:这里收集一些业内见到的移动端浏览器的兼容性问题. 如果大家也也到过, 欢迎补充. 1 虚拟键盘引起的兼容问题。 2 touch 事件引起的问题. 3 iOS 和 android 系统导致的差别。比如，微信内置浏览器 4 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 解决方案: <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> （部分 安卓 手机的UC浏览器写完以后还是可以放大缩小） 5 忽略将页面中的数字识别为电话号码 解决方案: <meta name="format-detection" content="telephone=no" />（ iOS 上会明显 有时候会把数字当成电话号码） 6 忽略Android平台中对邮箱地址的识别 解决方案: <meta name="format-detection" content="email=no" /> 7 移动端浏览器部分兼容问题 解决方案: viewport模板: <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0

WEB前端浏览器兼容性问题(pc端及移动端) PC端 （一）html部分 1.H5新标签在IE9以下的浏览器识别 < ! -- [ if lt IE 9 ] > < script type = "text/javascript" src = "js/html5shiv.js" > < /script > < ! [ endif ] -- > html5shiv.js下载地址 https://github.com/aFarkas/html5shiv/releases 2.ul标签内外边距问题ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0 （二）CSS样式的兼容性 1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同 IE的条件注释hack： < ! -- [ if IE 6 ] > 此处内容只有IE6.0可见 < ! [ endif ] -- > < ! -- [ if IE 7 ] > 此处内容只有IE7.0可见 < ! [ endif ] -- > 2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍 解决办法：display:block ; 3.IE6下图片的下方有空隙 解决方法：给img设置display:block ; 4

在做web工程时总是出现兼容模式css样式就没有了，整个页面就错乱了的现象。 看了这篇文章会对浏览器的模式有一些了解http://old.ui3g.com/artdetail.aspx?id=153 IE浏览器从IE8开始添加了兼容模式，开启后会以低版本的IE进行渲染。兼容模式有可能会导致网页显示出问题，于是我们通常在HTML中添加下列代码来使 IE 使用固定的渲染模式： <metahttp-equiv="X-UA-Compatible"content="IE=8"><!--以IE8模式渲染--> <metahttp-equiv="X-UA-Compatible"content="IE=7"><!--以IE7模式渲染--> 还有一种情况，在IE8下只有不使用兼容模式页面才能显示正常，但是如果设定为IE8的模式，在IE9中却会导致 CSS3 失效。看来，需要针对 IE8、IE9 分别 禁用兼容模式。怎么办呢？可以在后台判断浏览器版本，如果是IE8就输出content="IE=8"，如果是IE9就输出content="IE=9"。其实还可以单纯通过HTML来实现的，HTML代码如下： <metahttp-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE"> 经 测试 后完美解决了兼容模式问题

CSS兼容性技巧整理－－从IE6-IE9 火狐谷歌浏览器兼容 本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧，供大家参考。 　　CSS兼容常用技巧 　　请尽量用xhtml格式写代码，而且DOCTYPE影响 CSS 处理，作为W3C标准，一定要加DOCTYPE声明。 　　 1.div的垂直居中问题 　　vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 　　 2. margin加倍的问题 　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 　　例如： 　　<#div id=”imfloat”> 　　相应的css为 　　#imfloat{ 　　float:left; 　　margin:5px; 　　display:inline;} 　 　3.浮动ie产生的双倍距离 　　#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 　　这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始

CSS兼容性技巧整理－－从IE6-IE9 火狐谷歌浏览器兼容 本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧，供大家参考。 　　CSS兼容常用技巧 　　请尽量用xhtml格式写代码，而且DOCTYPE影响 CSS 处理，作为W3C标准，一定要加DOCTYPE声明。 　　 1.div的垂直居中问题 　　vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 　　 2. margin加倍的问题 　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 　　例如： 　　<#div id=”imfloat”> 　　相应的css为 　　#imfloat{ 　　float:left; 　　margin:5px; 　　display:inline;} 　 　3.浮动ie产生的双倍距离 　　#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 　　这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始

问题：经常遇到的浏览器的兼容性的情况、解决方法？ 思路：首先明确项目要兼容哪些浏览器的最低版本，然后考虑到CSS样式和JavaScript在这些浏览器的兼容性。 一、HTML 兼容性   1.H5新标签在低于IE9的浏览器中的识别   html5shiv.min.js：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。   respond.min.js: 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。   <!--[if lt IE 9]>     <script src=" http://cdn.bootcss.com/html5s... ;></script>     <script src=" http://cdn.bootcss.com/respon... ;></script>   <![endif]-->   引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果respond.js加载得很后面，这时重新根据media query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）。   2.不同浏览器的标签默认的内/外补丁不同   虽然这些年来随着浏览器的迅速发展与规范的统一

目录 为什么需要软件测试？回到顶部 为什么选择软件测试行业？回到顶部 为什么不让开发自己做测试？回到顶部 什么是测试？回到顶部 软件测试的作用？回到顶部 软件测试的诞生回到顶部 软件测试出现原因回到顶部 软件测试的发展回到顶部 软件测试的目标回到顶部 缺少软件测试发生的事故回到顶部 软件测试常见的误区回到顶部 软件测试的主要工作回到顶部 测试原则回到顶部 测试对象回到顶部 软件架构回到顶部 常见项目组织架构回到顶部 软件测试用例回到顶部 什么是测试用例回到顶部 为什么需要测试用例回到顶部 测试用例的意义回到顶部 测试用例的生命周期回到顶部 测试环境设计回到顶部 测试力度回到顶部 软件测试计划书回到顶部 测试计划的意义回到顶部 测试目标回到顶部 资源配置回到顶部 风险控制回到顶部 如何制定测试计划回到顶部 5W1H方法回到顶部 工作经验之谈回到顶部 图解软件测试计划回到顶部 软件计划报告回到顶部 软件兼容性回到顶部 what，什么是软件兼容性测试回到顶部 why，为什么要进行软件兼容性测试回到顶部 when，什么时候开始软件兼容性测试回到顶部 where，软件兼容性测试都要测什么回到顶部 who，谁来执行软件兼容性测试回到顶部 how，怎样执行兼容性测试回到顶部 版本控制回到顶部 引入版本控制的原因回到顶部 版本控制的定义回到顶部 版本控制方法回到顶部 版本控制评价标准回到顶部

参考：http://www.liuzp.com/css/15.html css的兼容性一般都是前端初学者面临的一个头疼的问题，难免写出来的css在各个浏览器下的效果均有不同，于是乎各种css hack写法出来了，其实在一个规范的项目开发中，css hack都是提倡能不用则尽量不用，因为产生兼容性问题的时候很多情况是写法不规范引起的，但也确实存在一些浏览器本身的bug，特别是万恶的IE。 　　小知识：什么是CSS hack？ 　　由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。 　　各浏览器CSS hack兼容表： IE6 IE7 IE8 FireFox Chrome Safari !important Y Y - Y * Y Y *+ Y \9 Y Y Y \0 Y nth-of-type(1) Y Y #test{ color:red; /* 所有浏览器都支持 */ color:red !important;/* Firefox、IE7支持 */

兼容性测试是指测试软件在特定的硬件平台上、不同的应用软件之间、不同的 操作系统 平台上、不同的网络等环境中是否能够很友好的运行的测试。 Web 兼容性 测试 类型主要有： 操作系统 、浏览器、分辨率和网速方面兼容性测试 分类具体： 1.操作系统兼容性 市场上有很多不同的操作系统，常用的有 Windows XP、Windows7、Mac、 Linux 等操作系统；同一个应用在不同的操作系统下，可能会有兼容性问题，可能有些系统正常，有些系统不正常，我们应该当针对当前主流的操作系统版本进行兼容性测试； 2.浏览器兼容性 国内主流的浏览器内核主要有3种：IE内核、Firefox内核和Chrome内核； （1）IE内核常见的浏览器有：IE6、IE7、IE8、IE9、IE10、IE11、 360 安全浏览器（兼容模式）、360极速浏览器（兼容模式）、搜狗浏览器（兼容模式）、QQ浏览器等等； （2）Firefox内核常见的浏览器即火狐浏览器（Firefox）； （3）Chrome内核常见的浏览器有：Chrome、360安全浏览器（极速模式）、360极速浏览器（极速模式）、搜狗浏览器（高速模式） 同一个应用在不同的浏览器下，可能会有兼容性问题，可能有些浏览器正常，有些浏览器不正常，我们应该当针对当前主流的浏览器版本进行兼容性测试； 3.分辨率兼容性 同一个页面在不同分辨率下，显示的样式可能会不一样