IE8忽略li标签的宽度

我有什么似乎是noob的问题，但我无法弄清楚这是为了我的光。我真的需要另一双眼睛来帮助我理解li标签为什么不在IE8中渲染宽度。IE8忽略li标签的宽度

虽然其他浏览器如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; 
}

我还附上一些截图我拿了我在结尾看到的。

This is IE8 showing the css using the dev tools built in the browser However, this is what it renders for the li tag This is how the nav renders in IE8 However this is how it renders in chrome

来源

2012-11-04 Renzo Gaspary

不要使用!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 
}

来源

2012-11-04 07:53:38

你是真棒！谢谢！ –

@RenzoGaspary欢迎您:) –

嗯...在我的情况下，它不适用于触摸显示器http://stackoverflow.com/questions/37468978/no-touch-event-for--tag/37470033#37470033。如果您有任何解决方案，请分享。 –

IE8忽略li标签的宽度

回答

相关问题