这是一个陆续完善的文章，记录一些书写css制作页面过程中遇到的兼容性问题，以作记录，可待查阅参考。
1、IE6浮动元素双倍边距
出现条件：当浮动元素的浮动方向与边距方向一致时出现，比如：float: left;margin-left: 10px; 或者 float: right,margin-right: 10px;
没什么好说的，这样设置浮动css类：
.left { float: left;fisplay: inline;}.right { float: right;fisplay: inline;} 2、复杂的浮动布局中，如果在两个浮动元素之间出现注释，有可能会触发IE6下最后一个文本重复的bug
a 浮动是魔鬼
b 浮动的标签之间不放注释，把注释放入标签内部
3、最小高度（宽度）的兼容实现
.class { min-width: 100px;_width: 100px;min-height: 100px;_height: 100px;} 4、IE6/7下,li子元素左浮动,且浮动子元素的同级元素右浮动,则li之间会有间隙,间隙大小随字体大小而变化
a 设置li元素浮动
b 设置li元素的 vercital-align 属性为 middle,bottom等值(推荐)
5、IE6父元素奇数宽高，子元素绝对定位1px间隙
外部容器为相对定位，宽高为奇数，子容器绝对定位，定位方向为 横向right, 纵向top或者bottom(height为奇数的情况下)
a 外部容器宽高设置为偶数数值
6、IE6下，盒子两边边框线断裂
这个问题遇到的比较少，出现情况：容器内有两个或多个浮动的子元素，并在子元素末尾用clear清除浮动，拖动滚动条时最外层的border会消失
a 给父级元素设置height:1%或zoom:1等 (触发IE6 haslayout)
b 给父级元素设置固定宽度width (同样也能触发IE6 haslayout)
c 给父级元素设置一个背景色background-color (触发回流,使IE6重绘,重绘当然也会包含border?)
7、position:relative/absolute无法冲破的等级
如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论span的z-index值设置得再高都将永远在后面父级的下面。
设置同样的position:relative/absolute;同级标签之间的等级是无法用z-index超越的
解决方法：对需要定位的元素，在需要的时候为其赋予定位属性，达到超越同级元素的效果
8、IE6下a:hover伪类 bug
鼠标移入a元素,a里面的img对象增加宽高,覆盖在同级元素上.要做这样的效果,一不小心就会遇到IE6下的a:hover bug。简单的解释就是(个人理解，不知道是否正确):a
:hover如果没有设置相应的属性值，那么该元素在hover以后就不会重绘，想要的效果就出不来，看代码：我想要的是，当鼠标移入a，那么span元素就出现，并且覆盖在其他的li（a）元素的上方。
a:hover 里面，我设置了一个 border: none; 属性，这个主要就是用来触发a重绘的，我的注释里面还有设置背景background属性(如果背景属性的值与a里面的一样，那么也是无用的，必须有改变)。
找到了原因，修复的方法也很简单，就是为a:hover状态设置触发重绘的属性，比如：border,background,position,padding,text-align,.....
9、IE6/7没有滚动条
html, body { overflow: hidden;} IE6/7 需增设html的oiverflow属性值为hidden。
10、IE6对容器使用滤镜，会导致容器下的a元素无法被点击
大家都喜欢使用png图片，但是png24格式图片的透明效果在IE6下无法透明，呈现灰色，不得已使用IE的私有滤镜来实现图片的透明效果
a 给链接设置 position 属性，值为relative
b 如果容器绝对定位，那么给a设置相对定位也解决不了上面的bug，这时可以给容器外层再加一个div层，并对该层进行绝对定位
c 对不支持png24的浏览器，降级使用png8(我比较喜欢这个)
d 无视IE6吧
相关代码(注：在IETest的IE6下，滤镜不起作用，bug也无法正常重现)：
View Code 11、Firefox下button/input[type=submit]文字稍微靠下
input[type=submit]元素，以及button元素的文字，在ff（某些版本）中不能垂直居中
a 使用 button 替换掉 input(submit, reset) 是一个比较好的做好，配合 button::-moz-focus-inner {margin: 0;padding: 0;border: none;} 可消除 FireFox 下 button 的文字不能垂直居中的问题
b button的文字默认是垂直居中的，不需要配合 line-height 来做垂直居中
View Code Firefox下button/input[type=submit]文字稍微靠下
- Firefox下button/input[type=submit]文字稍微靠下
- 使用 button 替换掉 input(submit, reset) 是一个比较好的做好，配合 button::-moz-focus-inner {margin: 0;padding: 0;border: none;} 可消除 FireFox 下 button 的文字不能垂直居中的问题
- button的文字默认是垂直居中的，不需要配合 line-height 来做垂直居中
12、IE6下z-index的bug
z-index，简单的说就是控制层级大小，举个栗子：
有10张纸，编号1-10，我们现在要按照从大到小的顺序把纸张整理好，所以我们会依据编号来整理纸张，对吧，大的在上，小的在下，这里，纸张就是div(层)，编号就是z-index的值，这么说应该会清晰一些。
不是所有的层设置z-index属性都会起作用，只有是具有position属性且值为relative|absolute|fixed的元素才会有用，这个可以形象的理解为有关系才能被重视，嗯，就是这个意思，哈哈
z-index的值越大，则该元素越靠上（想像你把一本书倒过来看的情形），这一规则在IE6下有些不一样:
a 父元素相对定位，z-index值设置很大，子元素浮动，该浮动元素无法穿透z-index值比父元素小的定位元素。
貌似这个bug与haslayout有关，修复方法：去除浮动；对浮动元素设置相对定位(推荐)或绝对定位。
b 绝对定位的子元素，其父元素若为相对或绝对定位，则该绝对定位的子元素的层级表现，在IE6下不是由自身的z-index绝对，而是要看其为相对或绝对定位的父元素的z-index决定。
还有个解释：ie6、7下面position非static的元素都会被隐含添加了z-index:0的属性，而比较不同dom分支上的元素Z向高度的标准做法是寻找他们第一个设置了z-index属性(position非static)的父元素，这就造成了ie6、7下面非要找到第一个position非static元素(这个元素被ie默认添加了z-index:0)进行Z向高度比较的bug。
解决方法：解决方法就是给绝对定位的父元素较大的z-index值
相关代码：
View Code 
IE6下img不能穿透blank层，貌似是因为img的浮动属性使元素脱离了文档流，这里给浮动元素添加position: relative;来修改该bug
绝对定位的子元素，其父元素若为相对或绝对定位，则该绝对定位的子元素的层级表现，在IE6下不是由自身的z-index绝对，而是要看其为相对或绝对定位的父元素的z-index决定。
该bug还有个解释：ie6、7下面position非static的元素都会被隐含添加了z-index:0的属性，而比较不同dom分支上的元素Z向高度的标准做法是寻找他们第一个设置了z-index属性(position非static)的父元素，这就造成了ie6、7下面非要找到第一个position非static元素(这个元素被ie默认添加了z-index:0)进行Z向高度比较的bug。
解决方法就是给绝对定位的父元素较大的z-index值
13、ie6下 gif动画不动
a 有onclick事件：在IE6中，点击a标签，onclick事件会先执行，其次是href下的动作，href执行后，默认会执行跳转动作（尽管href属性不一定是一个地址），于是页面中的加载就停止了，gif图片就停止播放了。这个应该是IE6底层机制的bug。
解决方法：在onclick事件后加上return false,这时href就不会被执行。
b 可能是浏览器的设置问题：工具——internet选项——高级——多媒体：勾选播放页面中的动画
14