精华内容
下载资源
问答
  • 网页兼容性测试

    千次阅读 2011-11-03 20:35:08
    》检查浏览器之间的兼容性 根据客户使用的各种浏览器产品及版本,测试网页的显示效果是否一般,根据国内情况,一般只要求保证IE和Firefox 兼容即可。目前,Firefox一般为Firefox 3.5 IE一般要求从IE6.0到IE8.0即可...

    》检查浏览器之间的兼容性

    根据客户使用的各种浏览器产品及版本,测试网页的显示效果是否一般,根据国内情况,一般只要求保证IE和Firefox 兼容即可。目前,Firefox一般为Firefox 3.5  IE一般要求从IE6.0到IE8.0即可。这意味着需要同时安装IE的多个版本,可以从网上下载Collection等软件,实现IE多个版本的共存。

    》 验证是否符合W3C相关标准。

      可以使用一下任一方法检测,也可以同时进行检测。

        *制作网页时使用Dreamweaver进行测试,Dreamweaver将给出可能存在的兼容性提示。

        *网页制作完成后使用Firefox插件进行检测。

        *发送到validator.w3.org官方网站进行在线验证。

       1.使用Dreamweaver测试是否符合W3C标准

           单页测试:

           打开网站的某个网页,依次点击 文件—验证—标记— 稍后就会在底部验证里出现提示。

           整站测试:

            在文件的窗口中,选中站点,然后依次点击下方属性窗口中的验证—、、、、、、、、

    展开全文
  • 兼容性测试

    千次阅读 2020-03-09 11:53:24
    兼容性测试 其实能对于我们软件测试来说,兼容性往往要比易用性的需求量要大的多。比如说我上市了一款app,那客户觉得我为什么使用某某款手机时下载安装不成功呢,或者进去之后闪退啊,或者显示功能不全啊,为什么有...

    兼容性测试

    其实能对于我们软件测试来说,兼容性往往要比易用性的需求量要大的多。比如说我上市了一款app,那客户觉得我为什么使用某某款手机时下载安装不成功呢,或者进去之后闪退啊,或者显示功能不全啊,为什么有的按钮不能点击啊,这些大限度的流失了客户。所以呢,兼容性测试对我们测试人员来说是非常重要的

    首先什么是兼容性测试?
    兼容性测试简称叫做CTS,指对所有设计程序与硬件、软件之间的兼容性的测试。

    一般来说呢,向我们在做一些软件,比如说是网站的时候,我们需要考虑到浏览器方面的兼容,考虑到操作系统方面的兼容,那有时候我们要做一个C/S架构的东西,一个C++的程序,那我们不仅要考虑这些,我们还要考虑它跟硬件之间的配合,跟网络之间的配合,这些都是兼容性需要考量的内容

    对于我们来说呢,我们现在测试的软件大都要么web端的,要么是手机端的,所以我们就要考虑浏览器啊,操作系统啊,硬件啊,网络环境啊,这些方面能否进行比较友好的测试
    “不同的网络环境:我们在兼容性测试中有一个子项叫做弱网测试,也就是说在我们的网络条件有限制的情况下,我的app也好,我的手机端的网页也好,是不是能够友好的给我们展示一些报错信息,甚至能够展示出来一部分内容这是弱网测试要达到的要求

    兼容性的分类
    在这里插入图片描述
    兼容性的作用
    1、兼容性测试能够进一步提高产品的质量,提高用户体验
    2、兼容性测试能使软件与尽可能多的其他软件‘和平共处’,尽可能达到平台无关性
    也就是说我们不管把它部署在什么服务器上,不管使我们线下拉一台服务器,还是线上去找一台云服务,不管是用一台非常新的电脑,用苹果机等去访问这个网站,还是一台非常非常旧的电脑打开我的ie8来访问这个网站,都能够正常运行,这就叫平台无关性
    3、兼容性测试能尽可能的保证软件的存在的价值,它可是衡量一个软件质量的重要标准
    4、兼容性测试能使软件产品的市场更广阔

    web兼容性测试
    主要考量:
    浏览器的兼容性
    操作系统的兼容性(核心:window,max,iphone)
    测试方法:
    人工测试:测试工程师测试主流浏览器和常用操作系统测试主流程和主界面,看看主流程和主页面是否有问题
    第三方工具测试:部分情况下,部分浏览器可以依赖第三方工具辅助测试

    怎么去做兼容性测试?
    很多时候呢,大家习惯一点就是我们把浏览器的覆盖,尤其是web中,浏览器测试覆盖的越全面越好,这样做是对的吗?我很肯定的来说没有问题,但是从测试效益上来说没有达到最高。真正我们要测试的时候,大家一定要像一个问题:就是为什么同样一个系统,同样的页面在不同的网站上,在不同的浏览器上 会呈现出不能的效果,为什么有的浏览器这个按钮可以点,到另外一个浏览器上就不可以点,这是为什么?这是源于我们浏览上的内核不同,所以呢,解析出我们浏览器前端页面也不同,才会导致一个浏览器上兼容性的错误,所以我们在考虑的时候,不是尽可能多的浏览器器覆盖,而是要从内核的角度来考虑
    那我们现在的三大浏览器:
    在这里插入图片描述
    我们先来分析这个三大浏览器,首先从IE的内核来说,IE的每一个大版本都会迎来一个内核上的变迁,所以从IE6.0~IE11.0这些版本我们都需要单独测试,当然这个测试是要根据项目不同来测试,如果我们的项目只需要支持到IE8以上版本,我自然就从IE8开始测试。如果一些程序有可能是要给政府部门,机关部门使用,那我们需要从IE6.0开始测试
    第二就是Chrome:chrome的内核相对复杂一些,chrome的内核相对变迁,在29版本之上ch使用的内核是Blink,之前是和苹果使用的统一个内核webkit.所以我们在做chrome的时候要综合考虑这两种内核,当然现在版本已经非常非常高了,如果一些新兴的网址的话,我们不在考虑webkit版本chrome内核的兼容性测试。
    第三大浏览器firefox:我们在进行测试的时候由于考虑到fixfox浏览器是静默更新的,所以我们网站里,我们的电脑里常常使用的fixfox的版本通常都是最新的,所以我们在真对fixfox浏览器的时候,都是用最新的内核来进行测试

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    app兼容性测试
    方向:
    硬件设备兼容(手机)
    手机操作系统版本兼容性
    测试方法:
    人工测试:测试工程师测试主流手机设备对主流程和主功能进行验证测试
    第三方测试工具:三方主要以云平台为主

    在这里插入图片描述
    在这里插入图片描述
    由于有些机器确实不太好买,所以能我们会有一些特殊的服务
    补充说明:
    使用TOP20的机型,指定系统版本
    Android机一律要求使用真机或者相应的云服务测试,IOS允许使用模拟器
    如果上述的设备无法获取到的,允许选取同类(android/ios)机型作为替代,但最多不 超过4个替代机型(最好系统一致,网页选择上一致等)

    展开全文
  • CSS兼容性汇总

    千次阅读 2017-03-09 15:25:15
    时间:2017年3月9日15:01:50 ...但作为一款产品,必须要在不同设备上显示效果相同,因此,在css编码过程中需要加入兼容性代码,也就是css hack。  兼容性解决方案:在css属性前加入浏览器前缀:-webkit-

    最近更新时间:2017年5月24日15:43:10

    《我的博客地图》

        随着现代浏览器发展速度太快,种类多,版本多,不同厂商浏览器或同一厂商不同版本的浏览器,对css的解析不同,以至于出现浏览器的渲染规范和css的渲染规范出现不兼容性,表现为同样的代码在不同浏览器下的显示效果出现差异化。但作为一款产品,必须要在不同设备上显示效果相同,因此,在css编码过程中需要加入兼容性代码。

        在html文档的head标签中加入如下meta标签,对于360的双核浏览器,浏览器会自动启动webkit内核渲染:

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    IE=edge,使用最高界别模式显示内容

    chrome=1,谷歌的外挂插件Google Chrome Frame(谷歌内嵌浏览器框架GCF),使用IE浏览网页时实际上是使用Chrome浏览器内核渲染,最低支持IE6,但前提是客户端已经安装GCF。

    <meta name="renderer" content="webkit">

    这个meta标识是360独有识别的,搞定360绝大部分的兼容。

       兼容性解决方案:

    1、css hack

        css hack,让css代码兼容IE浏览器,呈现出和其他厂商浏览器相同的UI界面。

        方式一:条件注释法

    <!--[if IE]>只在IE浏览器生效<![endif]-->

    <!--[if IE] 6>只在IE6浏览器生效<![endif]-->

    <!--[if gte IE 6]>只在IE6+浏览器生效<![endif]-->

    <!--[if ! IE 8]>只在非IE8浏览器生效<![endif]-->

    <!--[if ! IE]>只在非IE浏览器生效<![endif]-->

        方式二:属性前缀法

    *color:red;//IE7+的hack

    +color:red;

    -color:red;//IE6-的hack

    _color:red;//IE6-的hack

    #color:red;//IE6的hack

    color:red\0;//IE8-10的hack

    color:red\9;//IE6-10的hack

    color:red\9\0;//IE9-10的hack

    color:red !important;

    书写顺序,其他浏览器的css写在前面,IE7写在中间,IE6写在最后面

        方式三:选择器前缀法,假如要给#id1的元素写样式,如下,

    *#id1{};//IE6的hack

    *+#id1{};//IE7的hack

    还有\0、\9、等

    2、浏览器前缀写法

        浏览器内核:IE-Trident,Firefox-Gecko,Opera-Blink,Chrome-Webkit,Safari-Webkit,360-兼容模式Trident+极速模式Webkit

        在css属性名称前加上浏览器前缀,即可实现属性的兼容性,兼容属性会被该浏览器识别并渲染出来;有浏览器前缀的css属性应该放在没有浏览器前缀的css属性之后,以保证hack起作用。

    -webkit-(safari chrome)、

    -moz-(Firefox)、

    -ms-(IE)、

    -o-(opera);


    css选择器使用注意事项:为保证兼容性,尽量不要使用太高级的选择器,比如,

    p:first-of-type{};//选择每个p元素是其父级的第一个子元素

    兼容性为,支持该属性选择器的第一个浏览器版本号,如下,

    chrome 4+,IE 9+,firefox 3.5+,safiri 3.2+,opera 9.6+


    css兼容性实例解决方案汇总:

    1、父元素为flex属性,子元素为左固定宽,右自适应宽,但在IOS低版本系统中此布局失效,解决方案如下:

    display: -webkit-flex; display: flex;
    -webkit-flex-basis: 8.9rem; flex-basis: 8.9rem;
    -webkit-flex-grow: 1; flex-grow: 1;

    2、transform属性兼容性解决方案:

    transform:rotate(180deg);

    -webkit-transform:rotate(180deg); 

    3、block元素手动设置为inline-block元素时,横向布局出现间隙

    解决方案:设父元素font-size:0;

    4、input元素的placeholder属性,IE6-9不支持

    5、定制个性化滚动条

        滚动条出现的条件:

        一、文档内容高度/宽度 大于 浏览器的高度/宽度;

        二、文档内元素人为设置固定宽高后,再设置属性overflow || overflow-x || overflow-y : scroll,即可出现滚动条效果;

        由于不同内核浏览器的css hack不同,因此,针对不同内核浏览器有不同的解决方案,以<div class="content"></div>元素为例,定制该元素的滚动条样式,水平方向禁止滚动,垂直方向可滚动:

    <style>

    .content{width:100px; height:50px; overflow-x:hidden; overflow-y:scroll}

    </style>

        weekit内核:以下选择器选择的内容,可理解为块级元素

    .content::-webkit-scrollbar{width:2px; background:#fff}//设置 滚动条 整体的样式

    .content::-webkit-scrollbar-thumb{background:#f00}//设置 滚动器 的样式

    .content::-webkit-scrollbar-button{background:#0f0}//设置 滚动条 顶部和底部 的按钮样式

    .content::-webkit-scrollbar-track{}//外层轨道 样式

    .content::-webkit-scrollbar-track-piece{}//内层轨道 样式,不包括 滚动器 部分

    .content::-webkit-scrollbar-corner{}//右下角 边角 样式

    .content::-webkit-resizer{}//可缩放的.content的 右下角 边角样式

    未完,待续……


    展开全文
  • 那么浏览器兼容就需要考虑了,而又具体要如何去做呢? 我去查询了一下,在这里记录下来,转载一段知乎的回答: 作者:张克军 链接:https://www.zhihu.com/question/19736007/answer/12825938 来源:知乎 ...

    问题描述:最近开发web程序时,发现前端一些部分在不同浏览器之间显示有差异,一些效果或者直接丢失了。那么浏览器兼容就需要考虑了,而又具体要如何去做呢?

    我去查询了一下,在这里记录下来,转载一段知乎的回答:

    作者:张克军
    链接:https://www.zhihu.com/question/19736007/answer/12825938
    来源:知乎
    著作权归作者所有。

    先看一组豆瓣数据,各浏览器的占有率:
    ie6 - 30.23%
    ie7 - 4.8%
    ie8 - 30.6%
    ie9 < 1%
    chrome - 13.99%
    firefox - 7.17%
    safari ~ 5%
    其他 ~ 8%

    我们认为chrome + firefox + safari + ie9是高端浏览器,ie8勉强算准高端吧。这样这部分占有率约57%(如果加上其他webkit内核的浏览器会更高一些) 已经大于ie6 + ie7。

    高端和低端浏览器的差距可以用html5test量化一下:
    Google Chromium 11.0.690的分数是293,而Microsoft Internet Explorer 6.0的分数17

    也许有各种fallback方案可以保证完全兼容性各个浏览器,但依然不能保证低端浏览器的使用体验,顶多是看起来各个浏览器都一样了。因此,现在的设计和开发的策略是浏览器分级支持。优先为高端浏览器设计,同时考虑低端浏览器的退化方案。甚至有些复杂的应用可以拒绝ie6,提示用户使用高端浏览器。豆瓣7月份将会发布一款对ie6说no的产品(国内第一个拒绝支持ie6的产品吧)

    因此不要再考虑向后兼容,应该考虑向后退化,更多考虑向前兼容。 

    展开全文
  • Web兼容性测试

    千次阅读 2019-04-08 10:02:00
    Web兼容性测试类型主要有:操作系统、浏览器、分辨率和网速方面兼容性测试; 1.操作系统兼容性 市场上有很多不同的操作系统,常用的有WindowsXP、Windows7、Mac、Linux等操作系统;同一个应用在不同的操作系统下...
  • Web 兼容性指南

    千次阅读 2018-09-29 00:06:32
    毫无疑问,随着微信的崛起,移动端网页开发又进一步,需求量不断攀升。但是智能手机市场的丰富多彩,百花齐放,导致移动端的网页开发和传统的 PC 端网页开发有所不同。 很多人可能正迈向手机端网页开发,但又听说...
  • 浏览器兼容性测试工具Browser Sandbox

    千次阅读 2017-12-05 19:24:47
    搜索试用了一些可以用于网页测试的小工具,其中比较好用的一些,记录如下: 浏览器兼容性测试工具Browser Sandbox安利指数 ★★★★☆简介: Browser Sandbox是个插件,可以安装在Chrome下 功能:实现在一台机上测试...
  • 浏览器内核差异以及兼容性处理

    千次阅读 2017-09-20 14:26:28
     不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。 CSS Hack 形式 ...
  • 移动端常见的一些兼容性问题

    万次阅读 多人点赞 2016-06-20 18:05:06
    经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了480320,这样devicePixelRatio=2。现在android比较...
  • 而用户也有各不相同的使用浏览器的习惯,既有使用主流浏览器的也有使用非主流的(比如作者,用的是Opera,碰到过很多网页都有兼容性的问题……)所以,为了保证我们的软件产品能够面向大多数的用户,浏览器的兼容性...
  • 最近对公司一产品进行Google Chrome 浏览器兼容性测试,测试本身问题都可以解决,但是浏览器有些版本不好找啊~~~~~~ 介于此,与大家分享一些使用了的Google Chrome 浏览器版本,希望可以替你解决这个大麻烦。本地有...
  • H5兼容性问题解决方法

    千次阅读 2018-06-28 21:02:59
    经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了480320,这样devicePixelRatio=2。现在android比较...
  • 几款浏览器兼容性测试工具

    万次阅读 多人点赞 2018-03-05 18:17:03
    IETester这是我最先用的测试浏览器兼容性的工具,想必也是大家用的最多的一个,IETester是一个免费的Web浏览器调试工具,可以模拟出不同的js引擎来帮助程序员设计效果统一的代码。IETester可以在独立的标签页中开启IE...
  • 网页兼容测试工具2

    千次阅读 2012-03-26 00:14:27
    内容提要:很不错的文章,涵盖了目前前端开发者经常要用的一些测试工具与网站,对于前端开发来说测试各类网页在浏览器中的兼容性是必须掌握的技能,其中也包括使用许多软件来提高工作效率,当然本文并不包含所有的...
  • HTML Table局部布局与浏览器兼容性

    千次阅读 2017-04-17 17:55:37
    HTML Table局部布局与浏览器兼容性
  • 各大浏览器兼容性问题

    千次阅读 2015-09-09 12:10:07
    中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页兼容性。      实际上这是一个动态内核,与前面几个内核的最大的区别就在...
  • web 浏览器兼容性测试

    千次阅读 2017-08-30 17:27:50
     主要介绍了浏览器兼容,当然兼容性测试包括很多种,比如操作系统、分辨率等等,相对于其他,浏览器兼容性问题是最多,也是影响最大的,所以主要介绍了浏览器兼容。 转载于:...
  • 浏览器兼容性测试应该如何做?

    千次阅读 2017-06-15 11:06:52
    如今,市面上的浏览器种类越来越多(尤其是在平板和移动设备上),这就意味着你所测试...这两点就导致了对于日益增多的浏览器做兼容性测试显示十分必要,但也使得这种兼容性测试变得十分耗时。 通过全覆盖的测试,你就
  • web测试 (四)兼容性测试

    千次阅读 2013-03-13 10:43:49
    4 兼容性测试 兼容性测试是指待测试项目在特定的硬件平台上,不同的应用软件之间,不同的操作系统平台上,在不同的网络等环境中能正常的运行的测试。  兼容性测试的目的:待测试项目在不同的操作系统平台上正常...
  • 版本、兼容性以及标准

    千次阅读 2008-02-11 15:00:00
    本文译自Maciej Stachowiak在webkit团队blog上的文章Versioning, Compatibility and Standards。...注意,【】中的内容为我所加的注。 Versioning, Compatibility and Standards 版本、兼容性以及标准
  • 本文先分享第三方的一个前端工具箱全面展示那些浏览器版本支持CORS,由于各家浏览器厂商因为各自原因在不同的版本里支持的标准不同,这个工具小而美,可以清晰的比较不同版本浏览器前端技术兼容性对照表。...
  • ## 最近在用flex布局写一个日历组件,在chrome上...## 请问大家用flex布局写过网页,怎么解决兼容性问题,特别是产品,不是练习的。 ![图片说明](https://img-ask.csdn.net/upload/201611/18/1479401334_355767.png)
  • 各大浏览器兼容性报告

    万次阅读 2012-04-16 18:18:19
    IE、FF、Safari、OP不同浏览器兼容报告 分类: UI前端設計2011-12-05 17:01 323人阅读 评论(0) 收藏 举报   IE、FF、Safari、OP不同浏览器兼容报告 1 浏览器内核简介   ...
  • web兼容性测试 _ Web测试指南(四)

    千次阅读 2015-03-26 15:15:15
    这样,就可能会发生兼容性问题,同一个应用可能在某些操作系统下能正常运行,但在另外的操作系统下可能会运行失败。 因此,在Web系统发布之前,需要在各种操作系统下对Web系统进行兼容性测试。
  • 对于前端开发来说,就需要考虑字体文件的兼容性和文件的大小,在尽量保证UI效果的情况下,兼容更多的浏览器,减少资源体积,使UI效果、兼容性、性能三者达到平衡。由于中文字体字符集的限制,最终字体包文件都会很大...
  • 随便说说IE和Firefox的兼容性

    千次阅读 热门讨论 2008-09-01 14:24:00
    不管微软的IE是否有垄断之嫌,毕竟IE给我们上网提供了很大的便利,但是IE产品的BUG也层出不穷,这让很多人受尽折磨,至今还是如此。家里的电脑用了半年多了,速度越来越慢,IE经常无响应,导致系统崩溃,无奈只能按...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,353
精华内容 16,941
关键字:

兼容性网页产品