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

我猜你没有宣布doctype。尝试将其放在第一行，在html标记之前：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

您粘贴的代码在IE8中使用该doctype。

Answer 2

并非所有IE8版本似乎都能正常工作。我发现给定的代码，即使使用DOCTYPE，也不能在早期版本的IE 8.0.6001.18702中使用。

然而，较低IE版本的解决方法也在特定的IE 8上完成了它的工作：

<!--[if lt IE 8]>
<style type="text/css">
    li { display: inline; }
</style>   
<![endif]-->

Answer 3

您可以设置margin-right：1px

很适合我。

Answer 4

根据我的经验，使用声明内联块的通用方式（IE6 +）总是更好的主意。即使您每次尝试说新浏览器仅支持更新的浏览器时，某些客户仍然会对其文档类型感到困惑，然后销售人员说，它需要修复，因为客户仍然可以看到它和没有得到它，它是由他们的IE设置而不是我们的错。当您使用内联块来构建结构内容时，如果用户在旧IE上查看该站点是出于某种原因，则会使站点完全崩溃。

display: inline-block;
*zoom: 1;
*display: inline;

Answer 5

IE8会将它视为块级元素，除非你使用float。

.divInlineBlock
{
   display: inline-block;
   float: left;
}

Answer 6

请注意，如果您正在查看Intranet站点，IE8将像IE7一样，这可能会在您开发时发生！请参阅此StackOverflow问题：

IE8 Rendering as IE7 By Default?

Answer 7

对于IE8 - 您可以添加特定声明：

display: inline-table;

效果很好。

IE8显示内联块无法正常工作

7 个答案: