定义浏览器对于技术支持的标准不同造成兼容性的差异
兼容不同类型浏览器的基本方法
解决浏览器兼容问题的方法，这些方法被称之为Hack（即补丁的意思）。所谓Hack，就是利用各种过滤方法专门为特定类型浏览器定义样式，即称之为过滤器（Filter），从而实现在不同类型浏览器中呈现相同的渲染效果。
标准网页布局的兼容性处理
常用过滤器
IE 7版本浏览器定义样式，则可以使用如下过滤器。
<style type="text/css">
*+html body {
background:blue;
}
</style>
兼容原理：
“*”符号在IE浏览器中被认为是根节点，所以它可以包含html元素，而对于非IE浏览器来说，文档根节点应该是html，而不是“”，所以当使用“”通用符号包含html元素时，非IE浏览器会认为它是非法的，从而忽略这个选择器所定义的样式。同时IE 6及其以下版本浏览器不支持相邻选择器（+），所以也会忽略该选择器定义的样式。
IE6及其以下版本浏览器专用
<style type="text/css">
* html body {
background:red;
}
</style>
不过从语法角度分析，IE 7应该支持*通用符号包含html元素，但事实上并不支持，所以这也是一个很有趣的过滤器。
IE7和非IE浏览器专用
<style type="text/css">
html>body {
background:green;
}
</style>
兼容原理：
因为IE 6及其以下版本浏览器不支持子选择器，所以会忽略该过滤器定义的样式。
非IE浏览器专用
style type="text/css">
html>/**/body {
background:yellow;
}
</style>
在IE 8中存在问题，需要使用其他方法。
使用IE条件语句过滤
IE条件语句是IE浏览器自定义的一套逻辑语句，利用这些语句可以更加有效的为IE系列版本浏览器定义样式。
IE条件语句实际上就是HTML注释语句，只不过在注释标识符中增加了一组关键字，这一组关键字对于IE浏览器来说是有效的，但是对于其他浏览器来说，则被视为注释信息完全忽略。由于IE浏览器能够根据条件语句中设置的条件决定解析的版本，从而实现利用条件为不同IE版本浏览器定义样式的目的。
<!--[if IE]>
<h1>所有IE版本浏览器可识别</h1>
<![endif]-->
IE条件语句以中括号（[]）为起止标识符，其中包含一个条件语句。条件语句放在注释标识符内，且与注释标识符内部相邻，语法格式如上面示例。
在条件语句中可以增加修饰性关键字，如lte、lt、gte、gt和!，这些关键字作用说明如下：
- lte：小于或等于某个版本的IE浏览器。
- lt：小于某个版本的IE浏览器。
- gte：大于或等于某个版本的IE浏览器。
- gt：大于某个版本的IE浏览器。
- !：不等于某个版本的IE浏览器。
流动布局的兼容性处理
关于不同浏览器的默认值问题
页边距:IE浏览器默认为body元素的margin-left属性进行定义，默认值约为10像素；而对于FF浏览器来说，默认为body元素的padding-left属性进行定义，默认值约为8像素。与此类似的默认值差异设置还包括：
列表样式：IE默认使用margin-left属性定义，值约为40像素；而FF默认使用padding-left属性定义，值约为40像素。
网页居中样式：IE默认使用text-align属性，值为center；而FF默认使用margin属性，设置左右边界为auto。
鼠标指针样式：IE默认使用cursor属性定义，值为hand；而FF默认使用cursor属性，值为pointer。
列表兼容性处理—项目符号变异问题
这个问题存在于所有版本的IE浏览器中。当为列表结构中某列表项定义宽度或高度等特殊属性时，有序项目符号会发生混乱，而在非IE下却能够正常显示。
对于此类问题目前还没有好的方法，不过可以通过间接方法来实现。也就是说如果要定义列表项的宽度，不妨给列表项包裹一个外套，然后为外套定义宽度来实现。但是这样做会破坏列表结构的语义性，最佳方法应该是避免为列表项定义高度和宽度，除非不隐藏项目符号的显示。
还有一种方法：取消列表结构的默认项目符号，使用背景图像来定义项目符号，这种做法会更为灵活和个性。
默认高度问题
如果就这个问题继续探索。当我们定义元素高度为1像素时，则你又会发现：在IE 6及其以下版本中显示为2像素高度，而IE 7和非IE下显示为1像素。
使用CSS定义的overflow属性来裁切多出的高度，代码如下。
#bar {overflow:hidden;} /* 裁切多出区域 */
浮动布局的兼容性处理
浮动被流动包含问题
这是所有浏览器都存在的问题，即当一个自然流到的元素包含一个浮动的元素时，则包含元素会自动收缩，而不是被浮动元素撑开。既然所有浏览器都有这个问题，那么法不责众，这个问题也就算不上问题了，或者说它仅是一种现象。
解决方法：
可以使用增加清除浮动元素，强制包含框张开以包含浮动的子元素。
包含框不能自适应高度的问题
这个现象本应属于流动布局问题，因为与上一节示例存在问题有点类似，故放在这儿进行讲解。该问题存在于所有浏览器中。当为包含框内的元素定义上下边界时，包含框不能够自适应高度以包含子对象。
存在原因：
如果嵌套元素的边界没有被相互阻隔，则就会出现边界重叠现象。例如，被包含元素的上边界会自动与包含框的上边界重叠，被包含元素的下边界会自动与包含框的下边界重叠。
解决方法：
为包含框定义边框或者补白，从而阻断相互嵌套元素的上下边界接触，防止发生重叠现象，则阻断边界接触。
浮动布局中栏目内容被隐藏的问题
这个问题存在于IE 6及其以下版本浏览器中。有人把这个问题称之为躲猫猫或捉迷藏。之所以这样称呼，是因为在特定条件下栏目内容看起来消失了，只有重新刷新页面时才能够出现，或者用鼠标拖选可以使其显示。
出现这个Bug的原因比较特殊，一般需要几个前提条件：
- 包含框中包含有浮动元素和流动元素，且包含框定义了背景色。
- 浮动元素后面为一些流动元素，浮动元素的高度应该大于后面流动元素的高度。
- 在流动元素的下面是一个清除元素（即元素定义清除浮动属性），或者是一个被定义了宽度且宽度足以促使元素只能够显示在浮动元素的底部，而不是环绕在浮动元素的两侧。
当满足上面三个条件，则中间的流动元素（环绕在浮动元素两侧的元素）看起来似乎消失了，原来它们都隐藏到了父元素的背景后面，只有在刷新页面时才重新出现。
解决办法：
- 会在浮动元素后面增加清除元素。所谓清除元素，就是定义了clear属性的元素，这样就可以避免浮动元素对后面布局的影响。
- 在结构嵌套中应遵循最少的层次来满足页面设计需要，使页面结构简单，容易控制与管理，尽可能的减小由于不必要的嵌套引来的Bug。
html&css兼容性和hack技术 2
不同浏览器的标签默认的外补丁和内补丁不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
碰到频率:100%
解决方案：CSS里 *{margin:0;padding:0;}
这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
碰到频率：60%
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
问题症状：IE6里的间距比超过设置的间距
碰到几率：20%
解决方案：在display:block;后面加入display:inline;display:table;
行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
碰到几率：20%
解决方案：使用float属性为img布局
因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）
标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
透明度的兼容CSS设置
xxx-opacity:0.9;
filter:alpha(opacity=90);
hack
-
IE6认识的hacker 是下划线_ 和星号 *
-
IE7 遨游认识的hacker是星号 *
比如这样一个CSS设置：
height:300px;height:200px;_height:100px;
IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。
网友评论