html网页改兼容模型,兼容，通用hack方法/CSS兼容方案/js兼容方案

一些通用的hack方法

这边主要简单的讲述一些浏览器的hack方法，至于具体的兼容问题，后面再一一讲解。

CSS hack和filter原理

利用浏览器自身的bug来实现特定浏览器的样式

利用浏览器对CSS的完善度来实现，例如某些CSS规则或语法的支持程度，原理类似目前我们经常使用的 -wekit-　之类的属性；

IE条件注释

IE的条件注释仅仅针对IE浏览器，对其他浏览器无效；例如下面的语法：

!important 关键字

!important 在css中是声明拥有最高优先级，也就是说，不管css的其他优先级，只要!important出现，他的优先级就最高！遨游1.6及更低版本、IE6及更低版本浏览器不能识别它。尽管这个!important 很实用，但是非到必要的时刻，不要使用它！

属性过滤器(较为常用的hack方法)

针对不同的IE浏览器，可以使用不同的字符来让特定的版本的IE浏览器进行样式控制。

至于一些的关于属性选择器的过滤的方法这边就不再介绍了，因为这些都没有必要了，我想不到还有哪些丧心病狂的项目会要求兼容到IE6以下或者更低的了！

IE hack写法一览

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>CSS兼容方案篇<<<

上一篇文章介绍了一些常用hack方法，这次来讲一些之前遇到过或者尝试过的一些CSS兼容问题与解决问题，这些是自己的一些收集整理，肯定不可能大而全，只是一些比较常见的问题，等我整理下，下次来写篇JS的兼容问题。

另外，如果你是一位幸运的朋友(不用兼容低版本IE)，那么你也没有必要看这篇文章了。

a标签CSS顺序

很多新人在写a标签的样式，会疑惑为什么写的样式没有效果，其实只是写的样式被覆盖了，正确的a标签顺序应该：

link

visited

hover

active

24位的png图片

IE6不支持透明咋办？使用png透明图片呗，但是需要注意的是24位的PNG图片在IE6是不支持的，解决方案有两种：

使用8位的PNG图片

为IE6准备一套特殊的图片

透明度

opacity: 0.8; //通用

filter: alpha(opacity=80); //IE

filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80); //IE6的写法

如果你不需要兼容IE6，那么你可以甩掉那又臭又长的裹脚布了，反正我是记不住IE6的透明度写法，别怀疑，刚网上找的.

IE6双边距

行内属性设置了块级属性(display: block;)后，会产生双倍边距。

解决方案是在添加一个 display: inline; 或者 display: table;

双倍margin

浮动元素设置了margin在IE6下会产生双倍margin。

只要给浮动元素设置 display: inline;就可以了。或者说使用IE6的hack：_margin；

min-height的兼容写法

.divBox{min-height:200px;height:auto!important;height:200px;overflow:visible;}

IE6最小宽度(反正我没实践过？！)

.divBox{min-width:600px;_width:expression(document.body.clientWidth<600?"600px":"auto");}

盒模型差异

IE盒模型：margin 、 content(包含border、padding)

W3C盒模型： margin 、border、 padding、 content

CSS3中的box-sizing的属性就是为了这两种模式，border-box(IE盒明星)和content-box(W3C)

img标签-图片存在边距

使用 vertical-align 属性可以清楚这种边距

顺便说下a标签同样会存在边距，具体的解决方法可以看看去除inline-block元素间间距的N种方法;

IE6 高度无法小于10px

添加overflow的属性

设置font-size的属性为高度的大小

双倍float

.divBox{float:left;width:100px;margin:000100px;//这种情况之下IE会产生200px的距离display:inline;//使浮动忽略}

ul列表边距属性不统一

IE下 ul的边距是使用margin

firefox下ul的边距是使用padding

重置CSS基本样式， 统一使用margin或者padding

IE6下select元素显示bug

select元素在IE6下是以窗口的形式展现的，所以在你需要弹出一个提示框(modal)的时候，你会发现select在modal的上面，无论你设置多大z-index都无效。解决的方法也很简单，利用一个透明的iframe盖住select就可以了

//TODO;