IE8忽略li标签的宽度

Question

我有一个似乎是一个noob问题，但我无法弄明白这一点。我真的需要另一组眼睛来帮助我看看为什么li标签没有在IE8中呈现宽度。

虽然Chrome和firefox等其他浏览器都能很好地呈现这种风格，但是IE8拒绝合作并且拒绝将每个li的宽度设置为108px。

这是HTML：

<div id="navigation">
<ul>
    <li><a href="">HOME</a></li>
    <li><a href="">SERVICES</a></li>
    <li class="current_tab"><a href="">COMPANY</a></li>
    <li><a href="">EMPLOYEE</a></li>
    <li><a href="">WORK TOOLS</a></li>
    <li><a href="">CONTACT</a></li>
</ul>

这是该导航的CSS以及父标签：

body, html {
    overflow: auto;
    position: relative;
}

h3 {
    margin-bottom: 10px;
}

#employee_dir {
    margin-bottom: 20px;
}

#lotus {
    padding-top: 20px;
}

#content {
    margin-top: 10px;
}

#navigation li{
    background-color: transparent;
    background: url('../img/off-tab.png') no-repeat;
    padding-top: 0px !important;
    width: 108px !important;
    padding: 0px;
}

.current_tab {
    background-color: transparent;
    background: url('../img/on-tab.png') no-repeat !important;
    width: 108px;
    height: 33px !important;
}

#navigation a {
    text-align: center;
}

我还附上了一些我在最后看到的截图。

Answer 1

请勿使用!important声明，而应将<li>设为inline-block

#navigation li{
    background-color: transparent;
    background: url('../img/off-tab.png') no-repeat;
    padding-top: 0px !important;   <------ Why padding here?
    width: 108px;
    padding: 0px;   <-------Your padding-top gets re-setted here
    display: inline-block;  <------- Here
}