有序列表垂直IE瀏覽器，水平其他

希望這是簡單的我很想念，我有一個OL包含一組LI鏈接。在Chrome和Firefox中，這項功能完美無缺，在IE8中，它們顯示爲一個在頁面垂直向下移動的編號列表。有序列表垂直IE瀏覽器，水平其他

HTML：

<div class="header"> 
    <img src="images/header.png" alt="Logo"> 
    <ol> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="page2.html">page2</a></li> 
    <li><a href="page3.html">page3</a></li> 
    <li><a href="page4.html">page4</a></li> 
    <li><a href="page5.html">page5</a></li> 
    <li><a href="page6.html">page6</a></li> 
    <li><a href="page7.html">page7</a></li> 
    </ol> 
</div>

CSS;

.header { 
    width:888px; 
    height:119px; 
    margin: 0 auto; 
    margin-top: 20px; 
    padding:0; 
    text-align: left; 
} 
.header ol { 
    margin-top: -32px; 
    width: 888px; 
    padding:0; 
    margin-left: 10px; 
} 
.header li { 
    font-weight: bold; 
    display: inline; 
    padding-right: 20px; 
    padding-left: 20px; 
    border-right: solid 1px; 
    border-right-color: #FFFFFF; 
}

有沒有什麼基本的我在這裏失蹤？做一些搜索似乎沒有爲我提供解決方案。有一些關於在LI上使用display: inline;的建議，但這似乎沒有任何區別。我正在尋找的行爲是在Chrome和Firefox中顯示的鏈接的水平排序。

來源

2012-01-31 Draineh

你能在這個問題說你是否想列表項被水平放置替換或垂直？ – 2012-01-31 13:55:21

Heh，甚至沒有明確地說，寫了一個完整的問題。傑森已經設法找到我的問題，但我會更新它以備將來參考。 – Draineh 2012-01-31 13:59:04

\ o /，對其他人來說會很方便:-) – 2012-01-31 14:02:43

IE8和較低版本的IE在很多塊級元素上實現display:inline時遇到問題。

您可以嘗試float的li小號...

所以去除display:inline並且用類似float:left

來源

2012-01-31 13:49:41

是的。浮動：左邊應該做魔術。 – zvona 2012-01-31 13:51:07

謝謝。經過一些其他更改後，這工作。出於某種原因，我在身體類中定義了身高。 – Draineh 2012-01-31 13:58:27

很高興認出了@Draineh！ – 2012-01-31 14:06:17

有序列表垂直IE瀏覽器，水平其他

回答

相關問題