个人感觉使用display:inline-block;float:left;更好些吧。

IE6浏览器不兼容 浮动会出现双margin

float:left;display:inline;可以解决双倍问题，可是IE6 的双bug问题出现的前提什么，这种情况怎么会出现双倍间距问题呢？

是为了解决ie6的双margin bug

行元素浮动之后就相当与块状元素了，没有必要再设置display:block

所以正确应该是: li{ display:block; width:30px; height:24px; float:left; }

display:inline;是把元素变成内联元素，而<i>标签本身就是内联元素，内联元素设置width,height是无效的，所以课程中应该是弄错了，目的应该是为了给<i>标签加上width,height值，把<i>变成块及元素，块级元素是会独占一行的，所以又给加上了个float:left;属性让<i>标签跳出文档流。

有一种是为了IE兼容所使用的hack

关于display:inline和float:left:的区别，详看wiki。