display：内联以及float：left

Question

我正在查看2008年的一些旧CSS代码，并看到了以下用于菜单/导航的CSS：

#menu li {
    display: inline;
}



#menu a {
    display: block;
    float: left;
    height: 32px;
    margin: 0;
    padding: 18px 30px 0 30px;
    text-decoration: none;
    text-transform: capitalize;
    background: url(images/img03.jpg) no-repeat right top;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    color: #FFFFFF;
}

HTML：

<div id='menu'>
            <ul id='main'>
                <li class='current_page_item'><a href='#'>Homepage</a></li>
                <li><a href='#'>Products</a></li>
                <li><a href='#'>Services</a></li>
                <li><a href='#'>About Us</a></li>
                <li><a href='#'>Contact</a></li>
            </ul>
            <ul id='feed'>
                <li><a href='#'>Entries</a></li>
                <li><a href='#'>Comments RSS</a></li>
            </ul>
        </div>

结果：https://jsfiddle.net/wrsdh7yj/1/

我不明白首先设置列表项inline然后制作锚标记block并将其浮动的目的。

解释会有所帮助。

注意我把那些背景颜色放在那里看看发生了什么。

Answer 1

display: inline可以防止IE7中的楼梯效果/错误

IE7仿真中没有display: inline的图片