css一些樣式的兼容和一些寫法出現的bug

1.ul的li要同一行排列，

如果用display: inline-block;

在html的li換行時會產生3px的間距。

解決辦法：

（1）改變html結構

<ul>
  <li>
  item1</li><li>
  item2</li><li>
  item3</li><li>
  item4</li><li>
  item5</li>  
</ul>

 

（2）使用white-space: nowrap;

 

ul{
    white-space: nowrap;//規定段落中文本不換行    
    li{
        display: inline-block;
    } 
}

 

（3）用float: left;   （然後ul添加清除浮動）li浮動引起ul高度坍陷的解決方法

 

//清除浮動代碼
@mixin clear_fix() {
  *zoom: 1;
  &:after {
    content: "\200B";
    display: block;
    height: 0;
    clear: both;
  }
}

ul{   
    li{
        float:left;
    } 
    @include clear_fix();
}

(4)設置父元素字體爲0

第三種方法設置父元素的字體爲“0”，然後在“inline-block”元素上重置字體需要的大小。

ul {
   font-size: 0px;
    }
ul li {
  display: inline-block;
  *display: inline;
  font-size: 12px;
}