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;
}