网页兼容性调试

网页兼容性调试-流程

写作规范高质量的代码出兼容性问题的可能性较小。所以出了问题要考虑是否代码结构不规范

兼容性问题两大原因:
不同分辨率下的兼容性调试
不同浏览器下的兼容性调试

显示器分辨率和浏览器市场份额
http://tongji.baidu.com/data/browser

QQ同时在线人数和分布
http://im.qq.com/online/index.shtml

浏览器分类

国际品牌浏览器
IE:ie6 7 8 9 10 11
chrom
firefox
safari
opera

国产山寨牌浏览器
360:安全版,极速版
搜狗:兼容版,高速版
猎豹:兼容版,高速版
遨游
QQ
taobao
百度。。。

浏览器内核
webkit(Bink):chrom,opera,safari,山寨牌所有极速版浏览器(应用最广)
Trident:ie浏览器,山寨牌所有兼容版浏览器
Gecko:firefox

网页兼容性调试流程

注意:网页必须有文档申明,否则容易出现兼容性问题 ,尤其是IE

前提:网页必须在高级浏览器下制作,例如chrome,
开发网页时候,尽量固定页面宽度(960px,980px(推荐),1000px,1200px....)
(如果不固定页面宽度(弹性布局/响应式布局需要专门设计),当页面内容复杂时,不同分辨率下布局会错位)
网页制作完成后:

1:chrome下兼容性调试
不同分辨率下兼容性调试
1:自己电脑分辨率下网页兼容性
2:比我电脑更小的分辨率下调试
缩小浏览器宽度高度来模拟低分辨率情况
如果变形,需要给元素设置固定宽、高、边距等样式
3:比我电脑更大的分辨率下调试
缩小浏览器上的网页近似模拟高分辨率情况
注意:只是近似模拟,不是完全相同
调试结果仅用于测试网页超大背景颜色和图片、网页模块的居中布局情况
(缩小页面调试完成后记得回复页面比例:ctrl+0)

2:其他浏览器下兼容性调试
所谓其他浏览器,狭义指的就是 ie6,ie7,
1:使用chrome制作网页
2:使用ie查看网页
先用本系统自带ie查看网页
再按ie f12,切换ie不同版本查看网页(注意ie7)
再使用ietester软件,模拟ie6查看网页
(下面步骤根据需要可做可不做)
如有必要,本机安装虚拟机(virtualPC),安装xp系统,使用内置ie6调试网页
如有必要,再使用其他浏览器(国际、山寨)调试网页。
3:使用chrom做移动端调试

时间: 2024-11-02 14:57:07

网页兼容性调试的相关文章

夺命雷公狗---微信开发14----用网页调试工具调试自定义菜单接口

这种方法也的确可以创建的了自定义菜单,但是还是不够智能,废话不多说,开干.. 我们在上一颗里面已经获取到access_token的值了 那么我们下一步就是要在手册里面找到 ---自定义菜单创建接口,然后啦到最底部 这里有一个网页调试工具调试该接口的A链接,点击进去后,我们将看到如下界面: 这里的access_token就是刚才获取到的那段值: 然后我们再手册里面找到 然后将他复制进body体里面即可实现自定义菜单的设置,成功后将会和下显示一样: 我们然后重新扫码尽心关注下公众号即可发现不同的地方

浏览器兼容性调试 (360 , IE , Chrome)

浏览器兼容性问题,一直是一个比较头疼的事情,各家有各家的标准,这就苦了广大 debuger 们. 一.360 目前,360安全浏览器的使用者已经越来越多,而且从微软宣布和360合作,对xp进行维护后,更是有不可阻挡的态势.那带来的问题,就是我们需要去适配360. 360采用双核机制,包括webkit 和 IE内核,在安装过程中,会检测本地IE版本,如果高于IE8,则不安装内置IE8. 同时,360帮助也给出了一个解决办法,详情参见:点此查看.从这份帮助文档来看,360还是有一定的野心的,呵呵.

IE6+IE7+IE8+IE9+FF兼容性调试

HACK原理:不同浏览器对各中字符的识别不同 (读完文章你会发现,FF和IE8对以下字符的识别能力完全相同) 在 CSS中常用特殊字符识别表: (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6不能识别 !important外,  FF+IE8+IE7都能识别!important ; (3)_ : 除IE6支持_ 外,  FF+IE8+IE7都不支持_; (4)9:所有IE浏览器都识别(IE6.IE7.IE8.IE9) 示例:

浏览器兼容性调试

浏览器兼容性调试-IE CSS HACK IE CSS HACK 针对不同版本的,IE浏览器的,CSS兼容性调试语法:尽可能少用对CSS Hack使用需要加HTML文档声明<!DOCTYPE html> 否则无效 IE f12,切换 浏览器模式测试.(注:IE浏览器f12切换IE不同版本只在IE10下支持,所以推荐安装IE10,IE11可以卸载更新补丁回退IE10)如果控制台看不到但任务栏里有显示.将鼠标放在任务栏的开发人员工具上,出现一片透明的区域,.将鼠标移动到开发人员工具的缩略图上,右键

DIV+CSS 网页兼容性问题(IE6 IE7 IE8 IE9 火狐 chorm)

本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考. CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 http://www.php100.com 2. margin加倍的问题 设置为float的

各类网页兼容性及解决

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题.在学习浏览器兼容性之前,我想把前端开发人员划分为两类:第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都是浏览器的b

Eruda——手机网页前端调试面板

在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,没有问题了才会上到真机测试,移动端开发的一大问题就在于此, 各种品牌各种型号手机,手机中各种类型的浏览器APP........还好移动端的相对一致点,但是往往都会有一些各种各样的坑,这时候就蛋疼了,明明chrome调试工具中是正常的, 一到某个浏览器中就炸了,怎么办,又无法像在chrome中使用调试工具进行调试,只能通过alert()弹窗来调试,有什么办法可以像PC上那样清晰,可视化的调试

CSS 常用的兼容性调试技巧

1.实现所有浏览器主页居中 Firefox下主页居中代码:.box{margin:0px auto} IE5.5下主页居中代码:body{text-align:center;} 将以上两种代码,合在一齐书写: 2.单行文本上下居中 h1{ height:30px; line-height:30px; } 3.在IE6下,左右margin会加倍,应该是IE6下的一个bug        提示:排版时,能使用padding解决的,坚决不用margin.如果实在想用的话,就使用其中一边. 解决的方案:

datax+hadoop2.X兼容性调试

以hdfsreader到hdfswriter为例进行说明: 1.datax的任务配置文件里需要指明使用的hadoop的配置文件,在datax+hadoop1.X的时候,可以直接使用hadoop1.X/conf/core-site.xml; 但是当要datax+hadoop2.X的时候,就需要将hadoop2.X/etc/core-site.xml和hadoop2.X/etc/hdfs-site.xml合成一个文件,同时可以命名为hadoop-site.xml. 2.在合成的hadoop-site