五大浏览器的历史、差异、对CSS和ES的支持 内核：Trident、Gecko、Blink、Webkit 浏览器：IE Opera Safari Firefox Chrome_css 自定义属性 浏览器支持

历史

Internet Explorer

首次发表：1995 年 微软推出的 Internet Explorer。
IE1 发布于 1995 年 8 月 24 日，当时并没有捆绑在操作系统中，而是作为 Windows 95 插件的形式出现的，大小也只有 1 MB。
同年，IE2 发布，微软当时说这是第一个跨平台的浏览器，支持 Windows 和 Mac。IE2 也支持 JavaScript 了，虽然 IE2 仍然是一个相当基本的浏览器，但特色也比较突出，例如当时支持 12 种语言。
IE3 正式捆绑在 Windows 95 OSR2 中，它是第一个支持 CSS 的主流浏览器。而且，IE3 开始支持 ActiveX 控件，Java程序等，另外，IE3 它可显示 JPEG 文件、能播放声音文件。
1997 年，IE4 伴随着 Windows 98 一起发布，增加了许多新功能，IE4 也是 IE 浏览器中第一个支持 DHTML 的版本。 不仅 IE4 捆绑在 Windows 98 中，IE5 也是捆绑 Windows 98 SE 中 （捆绑在 Windows ME 中的叫 IE5.5） 发布的。虽然，IE6 捆绑在 Windows XP 中，其实，在 Windows XP 没有发布之前，IE6 就发布了，当时是作浏览器升级补丁的形式发布的。
IE6 应该说是微软的功臣，因为 Netscape 可以说是在和 IE6 的竞争中败下阵的，IE6内核将JavaScript分离运行，javaScript开始可以顺畅的使用在了浏览器中，这也是IE6历史意义。
微软在 2006 年 10 月推出了 IE7，IE7 同时兼容微软的 XP 和 Vista。
很长一段时间，IE 成了全球用户最多的浏览器之一，制定了自己的标准，不遵循W3C标准，导致了后起之秀的崛起。IE再开始追溯，频繁更新版本！
IE8和IE7相比，增加了对ARIA、IAccessibleEx和WinEvents的支持。

Opera

首次发表：1996 年 Opera 正式发布之前一直称为 MultiTorg Opera（2.0 版以前的 Opera 一直用这个名字，但这些版本没有对外发行）。Opera 发布后，很快就因其具有快速、多页面浏览等特性深受用户的欢迎。
从开发到发布，Opera 2.0 是完全独立于 Mosaic、IE、Netscape，按时髦的话说，就是有自己的内核。并且 Opera 从一开始就定位为高度符合标准的轻量级 Web 浏览器。Opera 2.0 支持HTML 3.0，可以任意缩放页面，并且提供了对多种图像和视频格式的支持。
Opera3 于 1997 年发布，Opera3 正式支持 JavaScript。
2000 年 6 月，Opera 4.0 发布，支持 SSL2、3， CSS1、CSS2，支持 XML 和 HTML4.0，并增加了打印预览功能。
Opera5 最为突出的特色是引入了鼠标手势，现在几乎所有的主流浏览器都加入了这个功能。
Opera6 加入了 PNG 图片透明属性，强化了弹窗拦截功能，增加了皮肤选择功能。
当时，浏览器的战争可以说是白热化了，那时，微软禁止了所有非 IE 浏览器访问他们的 MSN.com，微软的不厚道引起了各方的强烈反响，Opera 也被迫直接和 IE 正面发生了战争，Opera 当时在一个官方声明中是这样这样说的： “Opera 是国际知名的浏览器符合 W3C 的互联网标准，微软的行为是对 W3C 标准的挑衅和不尊重！” 针对 MSN.com 事件，Opera7 推出了 Windows 环境的特殊版本 “Bork”。当用户访问 MSN.com 时会发出“Bork, Bork, Bork!”的声音。除了与微软进行正面交锋，Opera7 同时还引入了普雷斯托布局引擎，提高了浏览速度以及对于标准的支持。 Opera8 和 Opera7 采用的是同样的引擎，但 Opera 8 增强了语音以及智能导航功能。2005 年 9 月，Opera 8.5 宣布永久删除广告横幅，从此完全免费对用户开放。
2012 年，Opera 推出了 12.x 版（最后更新至 12.16 ）。2013 年 4 月 3 日，Opera 宣布改用与 Google 浏览器相同的同核 Blink。更新内核后，Opera 跳过了 13、 14 ，2013 年 7 月发布了 Opera 15 正式版，2018已经更新的正式版是 Opera V54.0。

Safari

首次发表：2003 年 苹果公司 正式推出了 Safari 浏览器，但 2007 年 Safari 3.0 发布时才开始推出 Windows 版本。不过，Safari 的 Windows 版本评价不怎么样，这也许是导致了 2013 年苹果决定停止开发 Windows 版的主要原因。
苹果发布 Safari 4 时，乔布斯曾放言 Safari 是世界上最快的浏览器，但这种说法只是乔帮主的个人愿望，但不得不说，随着苹果在移动设备市场份额的加大，Safari 目前在全球浏览器的市场份额还是排在了领先位置。

Firefox

首次发表：2004 年 Firefox 是全球排名靠前的浏览器，并且多次获得了最受欢迎的浏览器的称号。Firefox 最开始的名字是 Phoenix（火鸟），后来因版权原因才更名为 Firefox（火狐）。 Firefox 可以说是从出生那天起就倍受媒体关注，而且是好评不断。
Firefox 1.0 于是2004乎年发布，上图展示的是一个可定制的搜索栏内置菜单栏。它还附带了弹出式窗口拦截、标签浏览、内置 RSS 阅读器、下载管理器等，Firefox 1.0 被公认比 IE 更安全。特别要说的是，Firefox 1.0 支持三方扩展，这也是 Firefox 后续版本能如此成功的关键因素。
Firefox1.5 在 2005 年发布，而且 Mozilla 宣布将 Firefox 开源，当时 Firefox 在 Windows 平台的市场占有率是 10%。
Firefox 2.0 增强了钓鱼保护功能，内置了拼写检索，改进了搜索功能。
Firefox 3.0 在 2008 年 6 月发布，它的重大变化是引擎升级到 Gecko 1.9。作了很多方面的改进，性能提升明显。也正因为如此，Firefox3 创下了 24 小时内下载次数最多的吉尼斯世界记录。

Chrome

首次发表：2008 年 谷歌 Chrome 浏览器刚刚发布时很多人都是非常惊讶的，市场份额进入了全球的三甲。 Google 强调改善了安全性和可靠性，并且针对每一个标签进行单进程处理。另外，引入了匿名模式和隐私浏览，并且可以同时运行。 Google Chrome 的发力可以说是非常之猛，2013年的时候，Google Chrome 已经发布的稳定版最新版到了 30.x，可以说更新速度已经是各浏览器之最了。至今为止Chrome 浏览器版本更新到了V67.0，其性能，速度依旧遥遥领先！

差异

常规API

获取HTML元素

IE: 支持el.name、el.getAttribute(name)
FF、Chrome: 基本属性支持el.name其余属性仅支持el.getAttribute(name)

自定义属性问题

IE: 可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；
Firefox: 只能使用 getAttribute() 获取自定义属性。

innerText的使用

FF不支持innerText，它支持textContent来实现innerText，不过textContent没有像innerText一样考虑元素的display方式，所以不完全与IE兼容。如果不用textContent，字符串里面不包含HTML代码也可以用innerHTML代替。
if(document.all){
document.getElementById(‘element’).innerText = “mytext”;
} else{
document.getElementById(‘element’).textContent = “mytext”;
}

获取可见区域、窗口的大小

有时，我们会需要找到浏览器的可视位置的大小，通常我们称之为"可见区域"。
在IE中这样写：
var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;
在Firefox中这样写：
var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;

Alpha 透明

这并不是一个JavaScript句法问题，而是源自于CSS的Alpha透明。但当某个物体需要淡入/出则需要JavaScript来表现，这是通过访问CSS的Alpha透明设置来完成的，通常在一个循环中完成。你需要通过来修改的JavaScript的代码如下：:
在IE中这样写：
#myElement { filter: alpha(opacity=50); }
在Firefox中这样写：
#myElement { opacity: 0.5; }
在IE中这样写：
var myObject = document.getElementById(“myElement”);
myObject.style.filter = “alpha(opacity=80)”;
在Firefox中这样写：
var myObject = document.getElementById(“myElement”); myObject.style.opacity = “0.5”;

CSS “float” 值

访问一个给定CSS 值的最基本句法是：object.style.property，使用驼峰写法来替换有连接符的值，例如，访问某个ID为"header"的

的 background-color值，我们使用如下句法：
document.getElementById(“header”).style.backgroundColor= “#ccc”;
但由于"float"这个词是一个JavaScript保留字，因此我们不能用object.style.float来访问，这里，我们可以在两种浏览器中这么做：
在IE中这样写：
document.getElementById(“header”).style.styleFloat = “left”;
在Firefox中这样写：
document.getElementById(“header”).style.cssFloat = “left”;

元素的推算样式

JavaScript可以使用object.style.property句法，方便地在外部访问和修改某个CSS样式，但其限制是这些句法只能取出已设的行内样式或者直接由JavaScript设定的样式。并不能访问某个外部的样式表。为了访问元素的"推算"样式，我们可以使用下面的代码：
在IE中这样写：
var myObject = document.getElementById(“header”);
var myStyle = myObject.currentStyle.backgroundColor;
在Firefox中这样写：
var myObject = document.getElementById(“header”);
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;

访问元素的"class"

“class"是JavaScript的一个保留字，在这两个浏览器中我们使用如下句法来访问"class”。
在IE中这样写：
var myObject = document.getElementById(“header”);
var myAttribute = myObject.getAttribute(“className”);
在Firefox中这样写：
var myObject = document.getElementById(“header”);
var myAttribute = myObject.getAttribute(“class”);

事件API

表示发生事件

（1）非IE浏览器下，事件对应的函数有一个隐藏的变量e，表示发生事件。
（2）IE下，不需要e变量，window.event表示发生事件。
解决方案：用e||window.event来兼容。

触发事件对象（触发事件的元素被认为是目标target）

（1）IE下，window.event对象有srcElement属性，但没有target属性。
（2）Firefox下，e对象有target属性，但没有srcElement属性。
（3）Chrome下，e对象同时具有target和srcElement属性。
解决方案：event.srcElement ? event.srcElement : event.target来兼容。

按键码（字符代码）

（1）IE下，window.event对象只有keyCode属性。
（2）FireFox下，e对象有which和charCode属性。
（3）Opera下，e对象有keyCode和which属性。
（4）Chrome下，e对象有keyCode、which和charCode属性。
解决方案：用e.keyCode || e.which || e.charCode来兼容。

阻止事件的默认行为

（1）IE 中阻止事件的默认行为需要将window.event.returnValue属性设置为false。
（2）非IE阻止事件的默认行为需要调用 e.preventDefault() 方法。
解决方案：条件判断浏览器是否具有event.preventDefault再做相应处理。

阻止事件冒泡

（1）IE阻止事件冒泡需要设置window.event.cancelBubble = true。
（2）非IE阻止事件冒泡需要调用e.stopPropagation()。
解决方案：条件判断浏览器是否具有event.stopPropagation再做相应处理。

获取鼠标指针的位置

计算出鼠标指针的位置对你来说可能是非常少见的，不过当你需要的时候，在IE和Firefox中的句法是不同的。这里所写出的代码将是最最基本的，也可能是某个复杂事件处理中的某一个部分。但他们可以解释其中的异同点。同时，必须指出的是结果相对于Firefox，IE会有更在的不同，这种方法本身就是有BUG的。
在IE中这样写：
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
在Firefox中这样写：
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;

CSS3 属性

CSS3 选择器

HTML5 Web 应用程序

HTML5 图形和内嵌内容

HTML5 音频编码

HTML5 视频编码

HTML5 表单对象

HTML5 表单属性

浏览器私有属性

Webkit 类型浏览器（如 Safari、Chrome）的私有属性是以-webkit-前缀开始，
Gecko 类型的浏览器（如 Firefox）的私有属性是以-moz-前缀开始，
Konqueror 类型的浏览器的私有属性是以-khtml-前缀开始，
Opera 浏览器的私有属性是以-o-前缀开始，
而 Internet Explorer 浏览器的私有属性是以-ms-前缀开始（目前只有 IE 8+ 支持-ms-前缀）。

主流浏览器对CSS属性支持的详细列表

浏览器兼容性相关问题及其解决思路

目前，各主流浏览器的新版本，对于 W3C 的标准支持很好，因此，首先保证代码符合 W3C 的标准，这是解决浏览器兼容问题的前提。
其次，对于某些支持受限的属性，针对不同的浏览器添加相应的前缀，比如-webkit-、-o-、-moz-。

1、不同浏览器默认的内外边距不同的问题
解决： *{margin:0;padding:0;}

2、不同浏览器水平居中的问题
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>

3、不同浏览器垂直居中的问题
在浏览器中 想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置
vertical-align:middle，但是文本框的内容不会垂直居中
解决： 给容器设置一个与其高度相同的行高 line-height:与容器的height一样

4、不同浏览器关于高度问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。 如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框
解决： 1.设置overflow:hidden; 2.高度自增height:auto!important;height:100px;

5、IE6 默认的div高度问题
ie6默认div高度为一个字体显示的高度，在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度
解决：为这个容器设置下列属性之一 1、设置overflow:hidden; 2、设置line-height:1px; 3、设置zoom:0.08

6、IE6 最小高度(宽度)的问题
ie6不支持min-height、min-width属性，默认height是最小高度，width是最小宽度。
解决： 使用ie6不支持但其余浏览器支持的属性!important。 设置属性min-height:200px; height:auto !important; height:200px;

7、td高度的问题
table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度
解决： 设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示

8、div嵌套p时，出现空白行问题
div中显示<p>文本</p>，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。
解决：设置p的margin:0px，再设置div的padding-top和padding-bottom

9、IE6-7图片下面有空隙的问题
块元素中含有图片时，ie6-7中会出现图片下有空隙
解决：1、在源代码中让</div>和<img>在同一行
2、将图片转换为块级对象display:block;
3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom
4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置： overflow:hidden;
5、设置图片的浮动属性 float:left;

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

11、IE6两个层之间3px的问题
左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距
解决： 1、右边层也采用浮动 float 2、左边层添加属性 margin-right:-3px;

12、IE6 子元素绝对定位的问题
父级元素使用padding后，子元素使用绝对定位，不能精确定位
解决： 在子元素中设置 _left:-20px; _top:-1px;

13、显示手型cursor:hand 问题
ie6/7/8、opera 都支持 ，但是safari 、 ff 不支持
解决： 写成 cursor:pointer; (所有浏览器都能识别)

14、IE6-7 line-height失效的问题
在ie中img与文字放一起时， line-height不起作用
解决：都设置成float

15、td自动换行的问题
Table宽度固定，td自动换行
解决： 设置Table的table-layout:fixed，td的word-wrap:break-word

16、子容器浮动后，父容器扩展问题
子容器都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>
1
2
3
4
5

17、透明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 */

18、list-style-position默认值的问题
ie下list-style-position默认为inside, firefox默认为outside
解决： css中指定为outside即可解决兼容性问题

19、list-style-image准确定位的问题
li前设置图片时，图片与其后的文字对齐问题
解决：1、采用背景定位 和 字符缩进的方法 background:url() no-repeat left center; text-index:16px;
2、采用相对定位方法 li 设置list-style:url(); li的子元素position:relative;top:-5px;

20、ul标签默认值的问题
ul标签在ff中默认是有padding值的,而在ie中只有margin有值
解决： 定义ul{margin:0;padding:0;}就能解决大部分问题

21、IE中li指定高度后，出现排版错误问题
在ie下如果为li指定高度可能会出现排版错位
解决： 设置line-height

22、ul或li浮动后，显示在div外问题
div中的ul或li设置float以后，都不在div中
解决： 必须在ul标签后加<div style=“clear:both”></div>来闭合外层div

23、ul或者li浮动后，margin变大问题
ul设置 float后，在ie中margin将变大
解决： 设置ul的display:inline，li的list-style-position:outside；li浮动问题设置li的display:inline

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

25、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解决。

26、IE6 垂直列表间隙的问题
li中有a且设置display:block时，ie6中列表间会出现空隙
解决： 1、li中加display:inline; 2、li使用float 然后 clear:both; 3、给包含的文本末尾添加一个空格 4、设置width

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

28、IE6-7 列表背景颜色失效的问题2
做横向导航栏时，ul设置为float且有背景色，li设置为float。ie6-7背景颜色失效
解决： 很多ie的bug都可以通过触发layout来解决 ul添加属性 1、height:1%; 2、float:left; 3、zoom:1;

29、列表不能换行的问题
li设置为浮动，后面的li紧随其后，不能换行
解决： 1、为这个ul定义合适的宽高 2、给包含这个ul 的父div定义合适的宽高。

30、超链接访问过后hover样式不出现的问题
击超链接后，hover、active样式没有效果
解决： 改变CSS属性的排列顺序: L-V-H-A

31、禁用中文输入法的问题
不能在输入框中输入汉字
解决： 只在ie系列 和ff中有效 ime-mode:disabled (但可以粘贴) 禁用粘贴： οnpaste=“return false”

32、除去滚动条的问题
隐藏滚动条
解决： 1、只有ie6-7支持<body scroll=“no”> 2、除ie6-7不支持 body{overflow:hidden} 3、所有浏览器 html{overflow:hidden}

33、让层显示在FLASH之上
把FLASH设置透明 1、<param name=" wmode " value=“transparent” /> 2、<param name=“wmode” value=“opaque”/>

34、去除链接虚线边框的问题
当点击超链接后，ie6/7/8 ff会出现虚线边框 ,而opera、safari没有虚线边框
解决： ie6/7中 设置为a { blr:expression(this.onFocus=this.blur()) } ie8 和 ff 都不支持expression 在ie8 、ff中设置为 :focus { outline: none; }

35、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%;

36、IE6背景闪烁的问题
链接、按钮用CSS sprites作为背景，在ie6下会有背景图闪烁的现象。原因是:IE6没有将背景图缓存，每次触发hover的时候都会重新加载
解决：用JavaScript设置ie6缓存这些图片： document.execCommand("BackgroundImageCache ",false,true);

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

38、IE6 绝对定位的问题 问题
解决：
left的定位错误问题
1、给父层设置zoom:1触发layout。 2、给父层设置宽度width
bottom的定位错误问题
1、给父层设置zoom:1触发layout。 2、给父层设置高度height

<div style="position:relative;border:1px solid orange;text-align:center;"> 
<div style="position:absolute;top:0;left:0; background:#CCC;">dovapour</div> 
<a href="#" title="vapour的blog">内容</a> 
</div>
1
2
3
4

39、float的div闭合的问题
例如：<div id=”floatA” ><#div id=”floatB” ><div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)
这段代码在IE中毫无问题，问题出在其他浏览器中。原因是NOTfloatC并非float标签，必须将float标签 闭合。
解决：
在 <div class=”floatB”> <div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会 产生异常。并且将clear这种样式定义为为如下即可：.clear{ clear:both;}

40、选框、复选框与后面的文字对不齐问题：
解决：
.align{font-size:12px;}
.align input{ display:block; float:left;}
.align label{ display:block; float:left; padding-top:3px; *padding-top:5px;}
不足之处：设置padding后高度和宽带都会增加

41、边框重叠说明 说明
为 table、td 都指定了边框后，然后使用border-collapse:collapse让边框重叠，可以看出在发生重叠时，Firefox 是用 td 覆盖 table 的，而 IE 是用 table 覆盖 td 的。使用时候需要注意。

42、设置td padding的说明：
设置td的padding以后高度和宽带都会增加,padding-left和padding-right的效果都一样增加了td的宽带，但是padding-top和padding-bottom的效果不一样。最好不要使用td的ding-top和padding-bottom

43、使一个层垂直居中于浏览器中 说明：
使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二
div { position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; }

44、行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug，IE6里的间距比超过设置的间距
解决：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

45、float的div闭合;清除浮动;自适应高度
① 例如：<div id=”floatA” ><div id=”floatB” ><div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性，用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> 比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决 <div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一个float left而宽度是100%的DIV解决之
④万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class=“clearfix” 即可,屡试不爽. /* Clear Fix / .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } / Hide from IE Mac / .clearfix {display:block;} / End hide from IE Mac / / end of clearfix */ 或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

参考网址

浏览器的发展史 - 欣欣向荣998 - 博客园
IE与其他浏览器的区别 - a464064368的博客 - CSDN博客
五大主流浏览器 CSS3 和 HTML5 兼容性大比拼
浏览器对CSS3的支持（CSS3浏览器兼容性一览表）
对浏览器css兼容性的学习理解及问题解决汇总