《网页设计与制作》课件——第八章 CSS兼容性详谈.pptVIP

Page*第八章CSS兼容性详谈本章知识点浏览器兼容性问题产生的根源浏览器兼容性测试CSSHack法IE条件注释法HTML默认样式引起的兼容性问题浮动引起的兼容性问题外边距叠加的问题居中的问题IE6中“捉迷藏”的问题如何避免CSS兼容性问题一、浏览器兼容性问题概述所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况用户使用的浏览器不会相同网站的网页显示效果应该统一前端开发人员必须具备解决兼容性问题的能力一、浏览器兼容性问题概述CSS在浏览器中的兼容性问题二、浏览器兼容性问题产生的根源不同的浏览器其内核不同，而对HTML、CSS、JS等代码的解析完全依赖于浏览器内核，导致用户最终看到的效果有差别浏览器内核：即浏览器所采用的渲染引擎，负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。需要在不同内核的浏览器中测试网页显示效果。二、浏览器兼容性问题产生的根源流行的浏览器内核有四种Trident内核：IE、具备“双核模式”浏览器的“兼容模式”WebKit内核：Safari、Chrome、具备“双核模式”的浏览器的“高速模式”Gecko：FirefoxPresto：Opera不同的浏览器内核所支持的特性不完全一致；不同版本的相同浏览器内核所支持的特性也有差别三、浏览器兼容性测试解决兼容性问题的第一步是发现问题，需要使用不同的浏览器对同一网页进行测试，并记录测试结果三、浏览器兼容性测试根据占有市场份额来确定需要通过测试的浏览器全世界浏览器市场份额2016年2月2017年4月三、浏览器兼容性测试根据占有市场份额来确定需要通过测试的浏览器中国国内浏览器排行榜2016年2月2017年4月三、浏览器兼容性测试不同的浏览器内核对应要使用的兼容性测试浏览器Trident内核：IEtest、SuperPreview、搜狗、360安全浏览器WebKit内核：Safari、Chrome、搜狗、360安全浏览器、遨游3Gecko内核：FirefoxPresto内核：Opera三、浏览器兼容性测试在同一计算机操作系统内测试多个浏览器版本使用虚拟机，安装多个操作系统，不同的系统使用不同版本的浏览器使用多版本集成测试工具，主要针对IE三、浏览器兼容性测试测试内容“网页平面效果图”或“标准界面效果图”在不同浏览器中的显示效果三、浏览器兼容性测试测试流程确定参考：“标准界面效果图”或网页在Firefox中显示效果测试顺序：Gecko内核：FirefoxWebKit内核：Chrome、Safari、搜狗（高速模式）Trident内核：IE10IE9IE8IE7IE6Presto内核：Opera（可不测试）360浏览器、遨游测试报告见书上测试报告参考模版四、CSS兼容性问题解决方案两类解决方案CSSHack法IE条件注释法四、CSS兼容性问题解决方案CSSHack法针对不同的浏览器写不同的CSS的过程，就叫CSSHack。工作原理：不同的浏览器对CSS的支持及解析结果不同不同的浏览器内核，可以认识一些专门的符号标识的CSSCSS中的选择器存在优先级后书写的声明，会覆盖前面的同类声明四、CSS兼容性问题解决方案CSSHack的三种表现形式选择器内部Hack选择器名称Hack浏览器私有扩展Hack四、CSS兼容性问题解决方案写CSSHack的一般技巧越多浏览器支持的写法，越应该放在前面处理IE浏览器的兼容性问题，一般使用选择器内部Hack因使用Firefox进行开发，一般兼容性问题使用“选择器内部Hack”基本可以解决四、CSS兼容性问题解决方案IE条件注释法指的是一种只在Windows下的IE上被识别的注释，从IE5开始支持。工作原理：在某个IE版本的浏览器下，找出导致兼容性问题的声明在代码中，使用只有该版本认识的“IE条件注释”，将有兼容性问题的声明重写四、CSS兼容性问题解决方案CSS兼容性问题解决总结应按照正确的测试顺序，一般为：“FFGH||SFIE10IE9IE8IE7IE6”基本原则最小影响快速维护最小成本代码可读五、常见CSS的浏览器兼容性问题HTML默认样式引起的兼容性问题浮动引起的兼容性问题外边距叠加的问题居中的问题IE6中“捉迷藏”问题五、常见CSS的浏览器兼容性问题HTML默认样式引起的兼容性问题产生的原因：不同的浏览器在解