ie6~7下display:inline-block无效

解决方案：需要hack触发hasLayout

1 //IE6、7中内联元素（如span）触发layout属性后， 它的行为和标准中的 inline-block类似2 //IE6、7中块级元素（如div）触发layout属性，同时设置了 display: inline ，那么它的行为和标准中 inline-block 类似3 {4     *display: inline;5     *zoom:1;6 }

IE6及更早浏览器只支持a(具有href属性)元素的:hover

IE6浮动元素与非浮动元素相邻的3px间距bug

解决方案：为浮动元素添加一个-3px的margin值，如元素左浮动时：

1 {
   _margin-right:-3px;}

 

IE6双倍margin

问题：IE6中，首个浮动到父元素边上元素，如果具有该方向的margin值，margin值会以双倍显示

解决方案：为浮动元素添加属性display:inline;

IE6中li元素的垂直间隙

问题：IE6中项目列表li的子元素浮动的时候，li之间会产生垂直的间隙，撑开ul 使高度增加

解决方案：

• 为li添加浮动

  1 li {
       float:left/right;}

• 在定义li元素的垂直对齐方式

  li {
       vertical-align:middle;}

  //其他值也可以

IE6中定位位置错误

问题：如果参照物(position:relative;)没有触发haslayout，那么在ie6中“绝对定位的容器”的left和bottom就会有问题。 （PS:top和right表现正常）

描述：

解决方案：在“相对定位的父容器”上加入 zoom:1 来触发ie的haslayout即可解决

小技巧：通常我们在设置一个容器为position:relative的时候，都会加上zoom:1来解决很多ie下的问题

IE67中定位元素溢出不动

问题： IE67中容器出线滚动条时，如果子元素为定位元素（绝对或相对），在拖动滚动条时该元素不会跟随移动

描述：

1 
     
      2     
      
       在ie67下，红色区域溢出，拖动垂直或水平滚动条时，红色区域不会动
      
3     
      
       position:relative;
      
4     
      
        
      
5 
     

解决方案：只需要在有滚动条的容器上也设置相对定位即可

1 .wrapper {
   position:relative;}

IE6中绝对定位1像素偏差

问题：IE6下参照物宽高为奇数时，绝对定位元素设置了位置为right和bottom为0或者left和top为100%时，仍会有1px的空隙

描述：

1 .wrapper {
   position:relative;width:501px;height:101px;margin:50px;background:#66c;}2 .wrapper .itm{
   position:absolute;width:40px;height:40px;background:#4e3;}3 .wrapper .itm-1{
   top:0;left:0;}4 .wrapper .itm-2{
   top:0;right:0;}5 .wrapper .itm-3{
   left:100%;top:100%;}6 .wrapper .itm-4{
   left:0;bottom:0;}7 .wrapper .itm-5{
   right:100%;bottom:100%;}

 

1 
     
      2     
      
        
      
3     
      
        
      
4     
      
        
      
5     
      
        
      
6     
      
        
      
7 
     

 

解决方案：照物宽高设置为偶数

IE6中定位元素消失

问题：ie6中，当容器子元素中同时具有具有浮动元素和绝对定位元素时，绝对定位的子元素会消失

解决方案：绝对定位元素设置清楚浮动clear:both;。如果浮动元素在文档顺序上排列在绝对定位元素之后，还要为浮动元素设置

1 {
   _margin-right:-3px;}/* 和浮动方向相反即可 */

IE67中表单元素偏离

问题：当“某些表单元素”的“父元素上触发了haslayout”后，这些表单元素会以“祖先元素上的margin-left值”偏离

描述：

1 .m-demo{
   width:400px;margin:0 0 10px;background:#ddd;}2 .m-demo .itm{
   margin-left:100px;zoom:1}3 .m-demo-fix .itm .inner{
   zoom:1;}

1 
当“某些表单元素”的“父元素上触发了haslayout”后，这些表单元素会以“祖先元素上的margin-left值”偏离
 2 
     
       3     
      
       
      
 4     
      
       
      
 5 
     
   6 
fix
 7 
在“父元素外或内”“再嵌套一个触发haslayout的元素”即可
 8 
     
       9     
      
       
        
       
      
10     
      
       
        
       
      
11 
     

 

解决方案：在“父元素外或内”“再嵌套一个触发haslayout的元素”即可，或者

1 .m-demo .itm *,{
   margin-left:-100px;} /*IE7及以下的选择器hack写法*/

IE6 7的a链接失效

问题：ie6、7，对于以下这样的结构，如果span触发了haslayout，那么图片区域将点击无效

1 
     
       2     
      3         4             5         6     7 
     

 

解决方案：给图片设置position:relative;z-index:-1;再给a设置cursor:pointer;

IE 6 overflow:visiable;会撑开容器

问题：IE 6 会扭曲默认的overflow visible值并将水平和垂直地扩展一个盒子一匹配内容。

参考资料：http://nec.netease.com/library/category/#bug