1.Web标准及W3C

        Web标准是由万维网联盟（W3C）制定的，Web标准的产生，网页内容能被更多的用户所访问到，文件下载和页面显示速度更快，所有页面都能提供适合打印的版本，网页开发人员更快捷，代码更易于维护，提高了搜索引擎的精准性，提高了网站的易用性。

        我们想要了解浏览器的兼容性，首先需要了解的就是，当今社会之中，都需要去了解哪些浏览器，浏览器之间又有什么的区别，也需要去了解浏览器的内核是什么。

2.主流浏览器

        浏览器内核主要指的是浏览器的渲染引擎，渲染引擎决定了浏览器如何加载和显示网页的内容以及信息。我们主要用于测试的浏览器有：IE、Chrome、Firefox、Safari、Opera、360浏览器。

IE：trident内核（IE内核）

Firefox：Gecko内核，Mozilla自己开发的一套开放源代码，以C++编写的渲染引擎。

Safari：webkit内核，开源的浏览器引擎，源自Linux平台上的一个引擎，经过Apple公司的修改可以支持Mac与Windows平台。

Chrome：Blink内核，Google和Opera Software共同研发。

Opera：以前是presto内核，现在改为Blink内核

360浏览器：兼容模式（trident内核），极速模式（Blink内核）

3.标准模式（Standards Mode）和怪异模式（Quirks Mode）

         在Netscape Navigator和Microsoft Internet Explorer为数不多的浏览器盛行时，他们对网页有不同的实现方式，那个时候的网页都是针对这两个浏览器写的。随着各种浏览器的兴起，加上Web标准的制定，现在的浏览器不能继续使用以前的页面了，所以浏览器引入了标准模式和怪异模式来解决这一问题。

        标准模式就是浏览器按照Web标准来渲染页面；为了解决浏览器还是能使用以前写的页面，所以怪异模式就产生了。怪异模式在不同的浏览器显示都是不一样的，因为他们都是按照自己的方式来渲染页面。

        我们知道了标准模式和怪异模式，可是浏览器是怎么选择模式来渲染页面的呢？我们经常在页面的开头看到<!DOCTYPE>声明，这是告诉浏览器选择哪个版本的HTML，对于渲染模式的选择，浏览器是根据DTD的声明。如果网页中有DTD标准文档的声明，那浏览器会按照标准模式来渲染网页；如果网页没有DTD声明或者HTML4以下的DTD声明，那浏览器就按照自己的方式渲染页面，页面进入怪异模式。

4.HTML语义化

 HTML语义化就是页面去掉样式或者加载失败的时候能够让页面呈现出清晰的结构。HTML5新增了好多标签，例如：header、footer、nav、menu、section、article等等，我们单单从字面上理解，就知道标签的含义。在写页面的时候，我们可以直接引用这些标签，不需要再用没有任何含义的div标签了，对于机器可以识别，对于开发人员，很容易明白，这就是HTML语义化。

    HTML语义化的好处有：有利于SEO优化，利于被搜索引擎收录，更便于搜索引擎的爬虫程序来识别；便于项目的开发及维护，使HTML代码更具有可读性，便于其他设备解析。

5.CSS的兼容性问题及解决问题整理

1、目前，各主流浏览器的新版本，对于  W3C  的标准支持很好，因此，首先保证代码符合 W3C 的标准，这是解决浏览器兼容问题的前提。

  其次，对于某些支持受限的属性，针对不同的浏览器添加相应的前缀，比如-webkit-、-o-、-moz-。

2、不同浏览器默认的内外边距不同的问题 

解决： *{margin:0;padding:0;}

3、不同浏览器水平居中的问题：ie6-7文本居中，嵌套的块元素也会居中 ，ff /opera /safari /ie8文本会居中，嵌套块不会居中 

解决： 块元素设置  margin-left:auto;margin-right:auto 或margin:0 auto; 或外层嵌套div设置<div align=”center”></div>

          浮动块元素的居中：<div style="margin:0px auto;"><div style="float:left;"></div></div>

4、不同浏览器垂直居中的问题 ：在浏览器中 想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置

     vertical-align:middle，但是文本框的内容不会垂直居中 

解决： 给容器设置一个与其高度相同的行高 line-height:与容器的height一样

5、不同浏览器关于高度问题 ：如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。 如果设定了高度，内容过      多时，ie6下会自动增加高度、其他浏览器会超出边框

解决： 1.设置overflow:hidden; 2.高度自增height:auto!important;height:100px;

6、IE6 默认的div高度问题：ie6默认div高度为一个字体显示的高度，在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字                                          体的高度

解决：为这个容器设置下列属性之一 1、设置overflow:hidden; 2、设置line-height:1px; 3、设置zoom:0.08 

7、IE6 最小高度(宽度)的问题：ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。

解决： 使用ie6不支持但其余浏览器支持的属性!important。 设置属性min-height:200px; height:auto !important; height:200px;

8、td高度的问题 ： table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度 

解决： 设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示

9、div嵌套p时，出现空白行问题：div中显示<p>文本</p>，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。

解决：设置p的margin:0px，再设置div的padding-top和padding-bottom

10、IE6-7图片下面有空隙的问题：块元素中含有图片时，ie6-7中会出现图片下有空隙

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

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

        4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置： overflow:hidden;  

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

11、IE6双倍边距的问题 ： ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题 例float:left;width:100px;margin:0 100px;

解决： 设置display:inline;

12、IE6两个层之间3px的问题： 左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距

解决： 1、右边层也采用浮动  float  2、左边层添加属性  margin-right:-3px;

13、IE6 子元素绝对定位的问题：父级元素使用padding后，子元素使用绝对定位，不能精确定位

解决： 在子元素中设置  _left:-20px; _top:-1px;

14、显示手型cursor:hand 问题：ie6/7/8、opera  都支持 ，但是safari 、 ff 不支持

解决： 写成 cursor:pointer;  (所有浏览器都能识别) 

15、IE6-7 line-height失效的问题：在ie中img与文字放一起时， line-height不起作用

解决：都设置成float

16、td自动换行的问题 ：Table宽度固定，td自动换行

解决： 设置Table的table-layout:fixed，td的word-wrap:break-word

17、子容器浮动后，父容器扩展问题： 子容器都float以后，父容器没有设定高度,父容器将不会扩展

 解决： 只需要添加一个clear:both的div，代码如下：

 <div style="border:1px solid #333;width:204px"> 

    <div style="width:100px;border:1px solid #333; float:left; ">子容器a</div> 

    <div style="width:100px;border:1px solid #333; float:left;">子容器b</div> 

    <div style="clear:both"></div>

 </div>

18、透明png图片会带背景色问题： 在ie6下透明的png图片会带一个背景色

解决： 

background-image: url(icon_home.png);/* 其他浏览器 */ 

background-repeat: no-repeat;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */ 

_background-image: none; /* IE6 */ 

19、list-style-position默认值的问题：ie下list-style-position默认为inside,   firefox默认为outside

解决： css中指定为outside即可解决兼容性问题

20、 list-style-image准确定位的问题：li前设置图片时，图片与其后的文字对齐问题

解决：1、采用背景定位 和 字符缩进的方法 background:url() no-repeat left center; text-index:16px;

         2、采用相对定位方法 li 设置list-style:url(); li的子元素position:relative;top:-5px; 

21、ul标签默认值的问题 ：ul标签在ff中默认是有padding值的,而在ie中只有margin有值

 解决： 定义ul{margin:0;padding:0;}就能解决大部分问题 

22、IE中li指定高度后，出现排版错误 问题：在ie下如果为li指定高度可能会出现排版错位

解决： 设置line-height

23、ul或li浮动后，显示在div外 问题： div中的ul或li设置float以后，都不在div中

解决： 必须在ul标签后加<div style="clear:both"></div>来闭合外层div 

24、ul或者li浮动后，margin变大 问题： ul设置 float后，在ie中margin将变大

解决： 设置ul的display:inline，li的list-style-position:outside；li浮动问题设置li的display:inline

25、嵌套使用ul、li的问题： ie的bug，嵌套使用ul、li时，里层的li设置float以后，外层li不设置float, 里面的ul顶部和它外面的li总是有一段间距

解决： 设置里面的ul的zoom:1

26、 IE6-7 li底部有3px的问题 ：这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一：width、height、zoom、padding-top、padding-bottom、                                                    margin-top、margin-bottom。

解决：

1、div设置clear:left|both，这时li不能设置width、height、zoom。  

2、li设置float:left，这时li可以设置width、height、zoom。  

3、li设置clear:left|both，这时li不能设置width、height、zoom。

4、IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。

27、IE6 垂直列表间隙的问题：li中有a且设置display:block时，ie6中列表间会出现空隙

解决： 1、li中加display:inline; 2、li使用float  然后 clear:both; 3、给包含的文本末尾添加一个空格 4、设置width 

28、IE6 列表背景颜色失效的问题 ：当父元素设置position:relative;时，在ie6中第一个ul、ol、dl的背景颜色失效

 解决： ul、ol、dl 都设置为position:relative;

29、IE6-7 列表背景颜色失效的问题2 ：做横向导航栏时，ul设置为float且有背景色，li设置为float。ie6-7背景颜色失效

解决： 很多ie的bug都可以通过触发layout来解决 ul添加属性 1、height:1%; 2、float:left; 3、zoom:1;

30、列表不能换行的问题 ：li设置为浮动，后面的li紧随其后，不能换行

 解决： 1、为这个ul定义合适的宽高 2、给包含这个ul 的父div定义合适的宽高。

31、超链接访问过后hover样式不出现的问题 ：击超链接后，hover、active样式没有效果

解决： 改变CSS属性的排列顺序: L-V-H-A

32、 禁用中文输入法的问题 ：不能在输入框中输入汉字

解决： 只在ie系列 和ff中有效 ime-mode:disabled    (但可以粘贴) 禁用粘贴： onpaste="return false"

33、除去滚动条的问题 ：隐藏滚动条

解决： 1、只有ie6-7支持<body scroll="no"> 2、除ie6-7不支持 body{overflow:hidden} 3、所有浏览器 html{overflow:hidden}

34、让层显示在FLASH之上：

解决：把FLASH设置透明 1、<param name=" wmode " value="transparent" /> 2、<param name="wmode" value="opaque"/>

35、去除链接虚线边框的问题 ：当点击超链接后，ie6/7/8  ff会出现虚线边框 ,而opera、safari没有虚线边框

 解决： ie6/7中 设置为a { blr:expression(this.onFocus=this.blur()) }  ie8 和 ff 都不支持expression  在ie8 、ff中设置为  :focus { outline: none; }

36、css滤镜的问题 ：css滤镜只在ie中有效，Firefox, Safari(WebKit), Opera只能够设置透明，它们不支持滤镜filter，无法实现图片切换中间变换的效果，只能通过透明度来                                设置。

解决： ff中设置透明度   -moz-opacity:0.10;  opacity:0.6; ie中只设置filter:alpha(opacity=50); 时，ie6-7失效，还要设置 1、zoom:1;  2、width:100%; 

37、IE6背景闪烁的问题：链接、按钮用CSS sprites作为背景，在ie6下会有背景图闪烁的现象。原因是:IE6没有将背景图缓存，每次触发hover的时候都会重新加载

解决：用JavaScript设置ie6缓存这些图片： document.execCommand("BackgroundImageCache ",false,true);

38、ff、chrome绝对定位无效 问题：在IE给td设置position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF和Chrome下却不可以。

解决：设置td的display:block。