这是我近两年在开发过程中遇到的一些ie兼容问题的总结，都记录了下来，虽然现在页面只考虑ie9以后的版本了，但是以前的小技巧还是写下来吧，里面也有一些不是ie遇到的问题，只是问题很小，但是解决需要技巧的小知识点。
1. 问题简述：块属性标签float后，横行margin双倍。
影响版本：ie6
问题分析：块属性标签添加float后，又有横行的margin情况下，在ie6中显示的margin
比设置的大。
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性。
问题预览：
修改前：
修改后：
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/doubleMargin.html
2. 问题简述：在ie6中元素高度超出自己设置高度。
影响版本：ie6
问题分析：这是ie6中会给元素设置默认的行高的高度导致的。
解决方案：
（1）.在样式控制中加入overflow:hidden;
（2）.设置line-height为更小的高度，此方法还要加上font-size才管用，注意font-size
的大小不要超过设定的高度。
问题预览：
修改前后对比：
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/overHeight.html
3. 问题简述：a(有href属性)标签嵌套下的img标签，在IE下会带有边框。
影响版本：ie6，ie7，ie8，ie9
解决方案：加上a img{border:none;}样式。
问题预览：
修改前后对比：
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/imgBorder.html
4. 问题简述：input边框问题。去掉input边框一般用border:none;就可以，但由于ie6，ie7
在解析input样式时的BUG，在ie6，ie7下无效。
影响版本：ie6，ie7
问题分析：涉及到border的有border-style，border-width，浏览器根据自己的内核解
析规则，先解析自身的默认CSS，再解析开发者书写的CSS，达到渲染标签的目的。IE6
对INPUT的渲染存在bug，border:none;不被解析，当有border-width或border-color
设置的时候才会令IE6去解析border-style:none;。
解决方案：
（1）.样式加入border:none;border-color:transparent;
（2）.样式加入border:0或border:0 none。
问题预览：
修改前后对比：
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/inputBorder.html
5. 问题简述：相邻的margin-top和margin-bottom会产生重合。
影响版本：ie，标准浏览器
问题分析：margin是个有点特殊的样式，相邻的margin-left和margin-right是不会重
合的，但相邻的margin-top和margin-bottom会产生重合。不管IE还是标准浏览器都
存在这问题。我们对上面的div设置了25px的下边距，对下方的div设置了50px的上边
距。为了便于观察，这里将div的高度都设为100px。结果不是预期的上下div拉开75px
的距离，而是拉开了半个div高度(50px)的距离。
解决方案：
（1）.给最后面的元素加上浮动（left/right）;
（2）.给最后一个元素加上display:inline-block;但是IE6和IE7下不完全支持
display:inline-block，所以要加上*display:inline;zoom:1即可解决IE6、7的bug;
（3）.统一使用margin-top或者margin-bottom，不要混合使用。这并不是技术上的必
需，但却是个良好的习惯。
问题预览：
修改前后对比：
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/margin.html
6. 问题简述：一个父包含框包含一个子元素。给正常流的子元素一个垂直外边距margin-top
就会使得父元素跟着往下走，而子元素和父元素的边距则没有发生变化。（这个子元素是块
元素）。
影响版本：标准浏览器(FirfFox、Chrome、Opera、Sarfi)
问题分析：一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子
的上边距会和其内部文档流中的第一个子元素的上边距重叠。
解决方案：
（1）. 在父层div加上：overflow:hidden;
（2）.把margin-top外边距改成padding-top内边距;
（3）.父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为
none 的 border（父层div加： padding-top: 1px,或者 border-top:1px ;）;
（4）.设置父元素或子元素浮动（left/right）;
（5）. 设置父元素dispaly:inline-block或者display:table-cell;
（6）. 给父元素加上绝对定位。
问题预览：
修改前：
修改后：
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/marginFC.html
7. 问题简述：当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，
父元素的overflow:hidden属性就会失效。
影响版本：ie6，ie7
解决方案：在父元素中使用position:relative;即可。
问题预览：
修改前：
修改后：
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/overflow.html
8. 问题简述：inline-block元素之间存在一定距离的间隙。
影响版本：ie，标准浏览器
问题分析：真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔
的情况下会有间距。
解决方案：
（1）.去掉HTML中的空格。例如：
<div class="space">
<a href="##">惆怅</a><a href="##">淡定</a><a href="##">热血</a>
</div>
或者：
<div class="space">
<a href="##">惆怅</a
><a href="##">淡定</a
><a href="##">热血</a>
</div>
（2）.使用margin负值；
（3）.设置其父元素样式letter-spacing为负值，其本身letter-spacing为0，此方法对
于ie6，ie7无效；
（4）.使用font-size:0，但是对于ie6，ie7还有1px的间隙。
问题预览：
修改前后对比：
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/minFontSize.html
9. 问题简述：如果绝对定位的元素，紧邻着两个浮动元素，在IE6 中绝对定
位的元素消失了。
影响版本：ie6
问题分析：当绝对定位的元素紧挨浮动元素时，或是浮动元素的宽度填满父元素时，绝对
定位元素就会消失。
解决方案：
（1）.别让绝对定位元素紧邻浮动元素就可以了。比如可以在绝对定位元素后面加个空元
素。当然，这个空元素是毫无意义的。
（2）.浮动元素的宽度不填满父元素。
问题预览：
按照方案一修改前：
修改后：
浮动元素宽度小于父元素时效果：
浮动元素宽度大于或等于父元素时效果：
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/disappear.html
10. 问题简述：IE6断头台问题：断头台问题是国外的CSS设计者给这个问题起的一个非常形
象的名字，与之相反的，被切断的不是对象的头部，而是对象的底部。例如：
用IE6进行测试，发现当鼠标移到连接2,3,4上时,div被砍掉了一半,高度跟这四个连
接的高度一样，如下：
影响版本：ie6
问题分析：这个问题的主要原因在于链接上，去除链接的a:hove样式后，一切正常。经测
试发现，不仅仅是 background-color的变化，如果改变hover状态下链接的其他属性，
也会引发同样的问题。例如设置padding、border、加粗、斜体等，都会引发断头台问题。
值得注意的是，在#layout中，#left是个浮动对象，而右测是若干链接对象。对于未指定
高度的对象而言，IE6会根据其中的内容（不管浮动与否）来计算高度的大小，而当例子中
的链接对象是个非浮动对象，并具有hover改变border,background及padding属性时，
IE6会认为这些属性同时会改变#layout的高度，因此它重新计算对象高度。而令人失望
的是，IE6的这种自以为是的行为并没有达到预期目的，它会把非浮动对象的总高度作为高
度给了#layout，从而切断了#left的内容。
解决方案：
（1）.对链接加上个div，并设置浮动#right{float:left}。这样使得两个对象都成为浮动
对象，不会引发问题；
（2）.在所有链接底部加<div class="clear"></div>占位框强制IE浏览器重新计算高
度，并且这个占位框的样式为.clear{height:0;overflow:hidden;clear:left;}。
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/noHead.html
11. 问题简述：ie各个版本hack
影响版本：ie浏览器
问题分析：CSS hack由于不同厂商的浏览器，或者是同一厂商的浏览器的不同版本，如
IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到
我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能
够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
解决方案：
（1）.类内部hack：
.header {_width:100px;} /* IE6专用*/
.header {*+width:100px;} /* IE7专用*/
.header {*width:100px;} /* IE6、IE7共用*/
.header {width:100px\0;} /* IE8、IE9共用*/
.header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/
.header {width:330px\9\0;} /* IE9专用*/
（2）.选择器Hack：
*html .header{} /*IE6*/
*+html .header{} /*IE7*/
12. 问题简述：ie6的max-height/width，min-height/width问题。
影响版本：ie6
问题分析：ie6不支持min-，max-样式。
解决方案：
（1）.IE6支持max-height解决方法:
样式控制中加入
_height:expression((document.documentElement.clientHeight||document.bod
y.clientHeight)>100?"100px":"");
（2）.IE6支持max-width解决方法:
样式控制中加入
_width:expression((document.documentElement.clientWidth||document.body
.clientWidth)>100?"100px":"");
（3）.IE6支持min-height解决方法:
利用hack，在样式中加入_height:xxpx;
（4）.IE6支持min-width解决方法:
利用hack，在样式中加入_width:xxpx;
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/minHeight.html
13. 问题简述：格式为png24的图片在ie6下不透明，有灰色背景。
影响版本：ie6
解决方案：使用滤镜，在要设置透明图片为背景的元素样式中加入_background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../css/i/on
g24_03.png");需要注意的是，这里对应的src地址一定是相对于html页面的不是相对
于css路径的。
问题预览：
修改前：
修改后：
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/png24.html
14. 问题简述：ie6不支持:first-child选择器
影响版本：ie6
问题分析：:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器，而ie6
不支持此选择器，不过可以用其他办法替代。
解决方案：在子元素的样式中加入*border-top-style:expression(this.previousSibling
==null?"none":"solid");
问题预览：
本示例是要让第一个li没有border-top。第一行的是未修改时ie6的效果，第二行是修
改后的效果。
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/firstChild.html
15. 问题简述：ie6不支持:last-child选择器
影响版本：ie6
问题分析：:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素，而ie6
不支持此选择器，不过可以用其他办法替代。
解决方案：在子元素的样式中加入*border-top-style:expression(this.nextSibling
==null?"none":"solid");
问题预览：
效果参考：http://devfe.jd.com/devfe/ie/1.0.0/html/lastChild.html
16. 问题简述：ie6下z-index不起作用
影响版本：ie6
问题分析：按照正常的思维，z-index层级越高，内容越应该在上面显示。在大部分的浏览
器在大部分的情况下，确实如此。但是ie6下，z-index总是事与愿违。这种情况发生的条
件有三个：1、父标签position属性为relative；2、问题标签无position属性（不包括
static）；3、问题标签含有浮动(float)属性。
解决方案：
（1）.position:relative改为position:absolute；
（2）.去除浮动；
（3）.浮动元素添加position属性（如relative，absolute等）。
问题预览：
修改前：
正常图片z-index为9999，应该在透明度为50%，z-index为1的背景的上层，看ie6
修改前效果，图片却在背景div的下层。
修改后：
