IE8显示内联块不起作用

Question

说我有以下代码

<style type="text/css" media="all">

  span, ul, ul li {

    display: inline-block;

    vertical-align: top;

    margin: 0;

    padding: 0;

    list-style: none;

  }   

</style>

<span>i would want</span>

<ul>

  <li>this</li>

  <li>on</li>

  <li>one line.</li>

</ul>

我希望它在IE8中显示内联。我到处阅读的所有内容都说这应该可行，IE8支持内联块。但是，经过一个上午的尝试，我无法获得上述排队。我知道我可以浮动它，但要使用页面上的其他元素（此处未显示），我需要使用一个“ clearfix”，它的标记更多。我只需要针对IE8，很想知道为什么内联块对我显然不起作用，但对我来说却不起作用。在Google Chrome浏览器中，上面的代码可以实现我想要的功能。

Answer 1

并非所有IE8版本都能正常工作。我发现给定的代码，即使使用DOCTYPE，在早期版本的IE 8.0.6001.18702中也不起作用。但是，较低IE版本的解决方法也可以在该特定IE 8上完成其工作：<!--[if lt IE 8]><style type="text/css">&nbsp; &nbsp; li { display: inline; }</style>&nbsp; &nbsp;<![endif]-->

Answer 2

以我的经验，使用通用方法（IE6 +）声明内联块总是一个更好的主意。即使您每次都试图针对较新的浏览器，我都试图说它仅受较新的浏览器支持，一些客户仍然会弄乱它们的文档类型，然后销售人员说，它需要修复，因为客户仍然可以看到它，并且没有得到它，这取决于他们的IE设置，而不是我们的错。此外，当您将内联块用于结构材料时，如果用户出于任何原因在较旧的IE上查看站点，它也可以防止站点完全崩溃。display: inline-block;*zoom: 1;*display: inline;分享编辑