IE 中为垂直有序列表，其他地方为水平有序列表

发布于 2025-01-01 00:54:04 字数 1303 浏览 0 评论 0原文

希望这是我所缺少的简单内容，我有一个包含一组 LI 链接的 OL。在 Chrome 和 Firefox 中，这工作得很好，在 IE8 中，它们显示为在页面上垂直向下移动的编号列表。

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 中显示的链接的水平排序。

原文

Hopefully this is something simple I am missing, I have an OL encompassing a set of LI links.
In Chrome and firefox this works perfectly, in IE8 they appear as a numbered list moving vertically down the page.

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;
}

Is there something basic I am missing here? Doing some searching doesn't seem to provide me with a solution. There are some suggestions of using display: inline; on the LI but this doesn't appear to make any difference.
The behaviour I am looking for is horizontal ordering of the links as displayed in Chrome and Firefox.

分享到QQ

分享到微博