HTML5第一阶段（第九章浏览器兼容）

来源：互联网发布：webservice返回纯json 编辑：程序博客网时间：2024/05/17 22:59
目录
一、常见浏览器兼容问题
二、解决方法
一、关于浏览器
这里写图片描述
大家可以猜出上面的浏览器分别是什么？1、IE浏览器 2、谷歌chrome 3、世界之窗 4、火狐firefox 5、NN 6、傲游 7、 8、欧朋 9、腾讯TT1.1 常用的浏览器    主流浏览器：IE、firefox、google chrome、opera、百度、360、搜狗、傲游最早安尔碘浏览器： Mosaic / Netscape Navigator（网景领航者）1994-2008 简称NN1.2 浏览器大战    第一次发生在上个世纪90年代，微软发布了它的IE和网景领航者大打出手。第二次发生在20世纪，战争产物IE9。1.3 五大浏览器内核    Trident（MSHTML）（三叉戟、三叉线、三齿鱼叉）    Gecko（壁虎）    Presto（迅速的）    Webkit（safari内核，chrome内核原型，它是苹果公司自己的内核，也是苹果的safari浏览器使用的内核）    Blink（由Google和Opera Software 开发的浏览器排版引擎）1.4 五大浏览器内核代表作品    Trident：IE、Maxthon（傲游）、腾讯、Theworld（世界之窗）、360浏览器 代表作品IE，因为IE捆绑在windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核之应用于Windows平台，其实不开源的。    Gecko：代表作品Mozilla Firefox是开源的，它的最大优势是跨平台，能在Microsoft windows、linuk和macos x等主要操作系统上运行。    Webkit：代表作品safari、chrome，是开源项目    Presto：代表作品Opera，Presto是由Opera Software开发的浏览器排版引擎。他是世界上公认的渲染速度最快的引擎    Blink：由Google和Opera Software 开发的浏览器排版引擎，2013年4月发布1.5 为什么会出现浏览器兼容问题？    由于各大主浏览器由不同的厂家开发，所用的核心架构和代码也很难重合，这就为各种莫名其妙的bug提供了温床。再加上各大厂商处于自身利益考虑而设置的种种技术壁垒，都让css应用起来比想象的要麻烦。浏览器的兼容问题是我们必须去克服的。1.6 Css Bug、Css Hack和Filter    1.6.1 CSS Bug：css样式在各浏览器中解析不一致的情况，或者说css样式在浏览器中不能正确显示的问题成为CSS Bug    1.6.2 CSS Hack：css中，Hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch来描述这种行为    1.6.3 Filter：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型    1.6.4 *使用Hack带来的一些副作用        降低了css代码的可读性，增加了代码的负担。    1.6.5 *设计css hack和filter通常有两种方法        一种是利用浏览器自身的bug，来隐藏或显示样式或声明        另一种是利用浏览器对css支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。1.7 IE常见css解析bug及hack    1.7.1 图片间隙    div中的图片间隙（该bug出现在ie6及更低版本中）        描述：在div中插入图片时，图片会将div下方撑大三像素。        hack1：将</div>与<img>写在一行上        hack2：将<img>转为块状元素，给<img>添加声明{display:block；}    dt中图片间隙（ie6）        hack：将<img>转为块状元素，给<img>添加声明{display：block；}    li中图片间隙        hack1：img转为块状元素        hack2：给ul设置font-size：0；        hack3：给img设置{margin-bottom：-3px}    1.7.2 双倍浮向（双倍边距）        描述：当ie6及更低版本浏览器的解析浮动元素时，会错误地把浮向边界加倍显示        hack：给浮动元素添加声明{display：inline；}    1.7.3 默认高度（ie6）        描述：ie6及以下版本中，部分块元素拥有默认高度（低于18px高度）        hack1：给元素添加声明：font-size：0；        hack2：给元素添加声明：overflow：hidden；
待续······
阅读全文
'); })();