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標籤的寬度

回答

相關問題