1

我正在处理一个要显示菜单（一组链接）的页面，其中菜单项水平放置并位于页面的右侧（类似于您在stackoverflow页面顶部看到的内容当您登录时）。

HTML 如下所示：

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">@import url(styles/style.css);</style>
    </head>
    <body >
        <div class="test">
            <!-- float right -->
            <ul class="fr">
                <li><img src="images/1.gif" alt="image 1"/></li>
                <li><img src="images/2.gif" alt="image 2"/></li>
                <li><img src="images/3.gif" alt="image 3"/></li>
            </ul>
        </div>
    </body>
</html>

“测试” CSS 类如下：

.test ul {list-style:none; }
.test li { display:inline;}

这在 Chrome 和 Firefox 上显示良好。li 项目以内联方式呈现在页面的右侧，全部在一行上。

但是，在 IE8 上，这些元素在页面右侧呈现在另一个之下。

我开始通过一次删除一行来研究导致这种情况的原因，并意识到摆脱：

<!DOCTYPE HTML>

从那个 HTML 页面，即使在 IE8 中也能很好地显示。有谁知道该页面上出现问题的原因是什么？

当然，这只是我的页面的精简版，我确实想在我的页面中使用 HTML5 功能，所以仅仅删除它似乎不是解决方案。

4

1 回答 1

1

我猜这是display: inlineIE8中的错误。尝试使用：

.test li {display: inline-block; }
于 2013-10-14T08:27:10.827 回答