我在一个页面上工作，我想在该页面上显示一个菜单(一组链接)，其中菜单项水平放置并位于页面的右侧(类似于您在顶部看到的内容登录时的 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 功能，因此仅删除它似乎不是解决方案。
最佳答案
我猜这是 IE8 中 display: inline 的错误。尝试使用:
.test li {display: inline-block; }
关于html - DOCTYPE HTML 导致带有内联 li 渲染的 IE8 出现意外问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19356132/