IE8显示内联块不起作用
假设我有以下代码，
<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 中查看时达到了我想要的效果。
Say I have the following code
<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>
I want this to display inline in IE8. Everywhere I have read everything says this should work, IE8 supports inline-block. However after a morning of trying I cant get the above to line up. I know I could float it, but with the other elements on my page (not shown here) I would need to use a 'clearfix' which is more mark up. I only need to target IE8 and would love to know why inline block doesn't work for me when apparently its supported. The above code does what I want when viewed in Google Chrome.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
你可以设置 margin-right:1px
对我来说效果很好。
You can set margin-right:1px
worked for me pretty well.
根据我的经验，使用声明内联块的通用方式（IE6+）始终是一个更好的主意。即使您每次都针对较新的浏览器，我试图说它仅受较新的浏览器支持，但有些客户仍然会弄乱他们的文档类型，然后销售人员说，它需要修复，因为客户仍然可以看到它并且不明白，这取决于他们的 IE 设置，而不是我们的错。更重要的是，当您将内联块用于结构性内容时，如果用户出于某种原因在旧版 IE 上查看网站，它可以防止网站完全崩溃。
In my experience it is always a better idea to use the universal way (IE6+) of declaring an inline block. Even if you are targeting newer browsers every time I've tried to say that it's only supported by newer browsers some client still messes with their document type, and then the sales say, it needs to be fixed, because clients can still see it and does not get it, that it's down to their IE settings and not our fault. More over when you are using inline-blocks for structural stuff, it keeps the site from completely disintegrating if the user is viewing the site on an older IE for what ever reason.
IE8 会将其视为块级元素，除非您使用浮动。
IE8 will treat it as a block level element unless you use float.
请注意，如果您正在查看 Intranet 站点，IE8 将像 IE7 一样运行，这可能会在您开发时发生！请参阅此 StackOverflow 问题：
IE8 默认呈现为 IE7？
Note that IE8 will act like IE7 if you are viewing an intranet site, which can happen as you develop! See this StackOverflow question:
IE8 Rendering as IE7 By Default?
对于 IE8 - 您可以添加特定的声明：
display: inline-table;效果很好。
For IE8 - you can add a specific declaration:
display: inline-table;which works great.
我猜你还没有声明文档类型。尝试将其放在第一行 html 标记之前：
您粘贴的代码可以在 IE8 中使用该文档类型。
I'm guessing you haven't declared a doctype. Try placing this on the first line, before the html tag:
The code you pasted works in IE8 with that doctype.
并非所有 IE8 版本似乎都能同样工作。我发现给定的代码，即使使用 DOCTYPE，在 IE 8.0.6001.18702（这是一个早期版本）中也不起作用。
然而，较低 IE 版本的解决方法在特定的 IE 8 上也能发挥作用：
Not all IE8 versions seem to work equally. I found that the given code, even with a DOCTYPE, does not work in IE 8.0.6001.18702, which is an early version.
However, the workaround for lower IE versions did its job on that particular IE 8 as well: