2

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

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

这是 IE8 使用浏览器内置的开发工具显示 css 但是，这就是它为 li 标签呈现的内容 这是导航在 IE8 中呈现的方式 然而，这就是它在 chrome 中呈现的方式

4

1 回答 1

3

不要使用!important声明，而是尝试制作<li>asinline-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
}
于 2012-11-04T07:53:38.380 回答