2023年6月21日发(作者：)
浏览器兼容问题及解决⽅案
所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况。在⼤多数情况下，我们的需求是，⽆论⽤户⽤什么浏览器来查看我们的⽹站或者登陆我们的系统，都应该是统⼀的显⽰效果。所以浏览器的兼容性问题是前端开发⼈员经常会碰到和必须要解决的问题。 浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是⼤家平常所说的的“内核”。市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。常见的浏览器内核代表有五种，分别是Trident、Gecko、Blink、Webkit、Presto 。他们代表的浏览器是：Trident:IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器；Gecko：代表作品Mozilla Firefox 是开源的,它的最⼤优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运⾏；Webkit :代表作品Safari、Chrome ， 是⼀个开源项⽬；Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎；Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4⽉发布。
下⾯介绍⼀些常见的浏览器兼容问题及解决⽅案。1、不同浏览器的标签默认的外补丁和内补丁不同解决⽅案： css ⾥增加通配符 * { margin: 0; padding: 0; }。2、IE6双边距问题；在 IE6中设置了float , 同时⼜设置margin , 就会出现边距问题解决⽅案：设置display:inline;3、当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案：超出⾼度的标签设置overflow:hidden,或者设置line-height的值⼩于你的设置⾼度4、图⽚默认有间距解决⽅案：使⽤float 为img 布局。5、IE9⼀下浏览器不能使⽤opacity解决⽅案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:(style = 0, opacity = 50);6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最⼤值，舍弃最⼩值；解决⽅案：为了不让边重叠，可以给⼦元素增加⼀个⽗级元素，并设置⽗级元素为overflow:hidden；7、cursor:hand 显⽰⼿型在safari 上不⽀持解决⽅案：统⼀使⽤ cursor:pointer。8、两个块级元素，⽗元素设置了overflow:auto；⼦元素设置了position:relative ;且⾼度⼤于⽗元素，在IE6、IE7会被隐藏⽽不是溢出；解决⽅案：⽗级元素设置position:relative。
还有⼀种解决⽅法就是CSS HACK的⽅法。⾸先需要知道的是：
所有浏览器 通⽤ height: 100px;
IE6 专⽤ _height: 100px;
IE7 专⽤ *+height: 100px;
IE6、IE7 共⽤ *height: 100px;
IE7、FF 共⽤ height: 100px !important;
使⽤IE专⽤的条件注释
以下两种⽅法⼏乎能解决现今所有兼容.
1, !important (不是很推荐，⽤下⾯的⼀种感觉最安全)
随着IE7对!important的⽀持, !important ⽅法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)代码:
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不⽀持.⽽*+html⼜为 IE7特有标签.
代码:
注意:
*+html 对IE7的兼容 必须保证HTML顶部有如下声明：
万能 float 闭合(⾮常重要!) 可以⽤这个解决多个div对齐时的间距不对，
关于 clear float 的原理可参见 [How ToClear Floats Without Structural Markup]
将以下代码加⼊Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:
上⾯就是⼀些浏览器问题及其解决⽅法，希望可以帮到你！
2023年6月21日发(作者：)
浏览器兼容问题及解决⽅案
所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况。在⼤多数情况下，我们的需求是，⽆论⽤户⽤什么浏览器来查看我们的⽹站或者登陆我们的系统，都应该是统⼀的显⽰效果。所以浏览器的兼容性问题是前端开发⼈员经常会碰到和必须要解决的问题。 浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是⼤家平常所说的的“内核”。市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。常见的浏览器内核代表有五种，分别是Trident、Gecko、Blink、Webkit、Presto 。他们代表的浏览器是：Trident:IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器；Gecko：代表作品Mozilla Firefox 是开源的,它的最⼤优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运⾏；Webkit :代表作品Safari、Chrome ， 是⼀个开源项⽬；Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎；Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4⽉发布。
下⾯介绍⼀些常见的浏览器兼容问题及解决⽅案。1、不同浏览器的标签默认的外补丁和内补丁不同解决⽅案： css ⾥增加通配符 * { margin: 0; padding: 0; }。2、IE6双边距问题；在 IE6中设置了float , 同时⼜设置margin , 就会出现边距问题解决⽅案：设置display:inline;3、当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案：超出⾼度的标签设置overflow:hidden,或者设置line-height的值⼩于你的设置⾼度4、图⽚默认有间距解决⽅案：使⽤float 为img 布局。5、IE9⼀下浏览器不能使⽤opacity解决⽅案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:(style = 0, opacity = 50);6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最⼤值，舍弃最⼩值；解决⽅案：为了不让边重叠，可以给⼦元素增加⼀个⽗级元素，并设置⽗级元素为overflow:hidden；7、cursor:hand 显⽰⼿型在safari 上不⽀持解决⽅案：统⼀使⽤ cursor:pointer。8、两个块级元素，⽗元素设置了overflow:auto；⼦元素设置了position:relative ;且⾼度⼤于⽗元素，在IE6、IE7会被隐藏⽽不是溢出；解决⽅案：⽗级元素设置position:relative。
还有⼀种解决⽅法就是CSS HACK的⽅法。⾸先需要知道的是：
所有浏览器 通⽤ height: 100px;
IE6 专⽤ _height: 100px;
IE7 专⽤ *+height: 100px;
IE6、IE7 共⽤ *height: 100px;
IE7、FF 共⽤ height: 100px !important;
使⽤IE专⽤的条件注释
以下两种⽅法⼏乎能解决现今所有兼容.
1, !important (不是很推荐，⽤下⾯的⼀种感觉最安全)
随着IE7对!important的⽀持, !important ⽅法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)代码:
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不⽀持.⽽*+html⼜为 IE7特有标签.
代码:
注意:
*+html 对IE7的兼容 必须保证HTML顶部有如下声明：
万能 float 闭合(⾮常重要!) 可以⽤这个解决多个div对齐时的间距不对，
关于 clear float 的原理可参见 [How ToClear Floats Without Structural Markup]
将以下代码加⼊Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:
上⾯就是⼀些浏览器问题及其解决⽅法，希望可以帮到你！
发布评论