html - IE8 忽略 li 标签的宽度

Question

我有一个似乎是菜鸟问题，但我无法以我的眼光解决这个问题。我真的需要另一双眼睛来帮助我了解为什么 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
}