经常遇到的浏览器兼容性有哪些？原因，解决方法是什么

这儿是修仙院后端小课堂，本篇剖析的主题是

【经常碰到的浏览器的兼容性有什么？缘由，解决方式是哪些，常用hack的方法？】

明天给你们分享一下，遇见的浏览器兼容性有什么？缘由，解决方式是哪些，常用的hack方法

一.背景介绍

所谓的浏览器兼容性问题，是指由于不同的浏览器对同一段代码有不同的解析，导致页面显示疗效不统一的情况。在大多数情况下，我们的需求是，无论用户用哪些浏览器来查看我们的网站或则登录我们的系统，都应当是统一的显示疗效。所以浏览器的兼容性问题是我们web后端开发人员常常会遇到和必需要解决的问题.

二.知识分析

解决浏览器兼容的主要方式是csshack这么究竟哪些是csshack呢？

因为不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，致使在不同浏览器的环境中呈现出不一致的页面诠释疗效。这时，我们为了获得统一的页面疗效解决网页兼容问题代码，就须要针对不同的浏览器或不同版本写特定的CSS款式，我们把这个针对不同的浏览器/不同版本写相应的CSScode的过程，称作CSShack!

三.常见问题

3.1默认的内外行距不同

解决方式一.直接用*{margin:0;padding:0;}

方式二.单独消除须要清理的元素例如body,h1,h2,h3,h4,h5,h6,p,列表元素dl,dt,dd,ul,ol,li表单元素form,fieldset,legend,button,input,textarea等等

3.2块元素中富含图片时解决网页兼容问题代码，ie6-7中会出现图片下有缝隙

解决方式

1、在源代码中让div和img在同一行

2、将图片转换为块级对象display:block;

3、设置图片的垂直对齐方法vertical-align:top/middle/bottom

4、设置图片的浮动属性float:left;

3.3ul和ol列表缩进问题

在IE中，设置margin:0px可以消除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对款式没有影响；

在FirefoxChrome中，设置margin:0px仅仅可以消除上下的空白，设置padding:0px后仅仅可以去除左右缩进，还必须设置list-style:none能够消除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终疗效，而在Firefox中必须同时设置margin:0px、padding:0px以及list-style:none三项能够达到最终

四.解决方案

刚刚我们用的都是比较通用的做法这么用hack方式呢？

CSSHack大致有3种表现方式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML背部引用ifIE）Hack，实际项目中CSSHack大部份是针对IE浏览器不同版本之间的表现差别而引入的。

属性前缀法(即类内部Hack)：比如IE6能辨识顿号”_”和星号”*”，IE7能辨识星号”*”，但不能辨识顿号”_”，IE6~IE10都认识”9″，但firefox前述三个都不能认识。

选择器前缀法(即选择器Hack)：比如IE6能辨识*html.class{}，IE7能辨识*+html.class{}或则*:first-child+html.class{}。

IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+早已不再支持条件注释)：IE浏览器显示的内容，针对IE6及以下版本：只在IE6-显示的内容。这类Hack除了对CSS生效，对写在判定句子里边的所有代码就会生效。

background-color:orange;/*all-forFirefox/Chrome*/

background-color:red;/*ie8*/

background-color:blue9;/*ie9/10*/

*background-color:black;/*ie6/ie7*/

_background-color:green;/*ie6*/

五.拓展思索

还有其他的hack方法吗吗？

关于手形光标.cursor:pointer.而hand只适用于IE.

若需给a标签内内容加上款式,须要设置display:block;

【更多内容，可以加入IT交流群565763832与你们一起讨论交流】

【这里是技能树·IT修仙院：IT修仙院官网，初学者改行到互联网的集聚地】

———————