CSS IE8 显示内联块不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9110646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE8 display inline-block not working
提问by tdh87
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.
我希望它在 IE8 中内联显示。我读过的所有地方都说这应该有效，IE8 支持内联块。但是，经过一个上午的尝试，我无法将上述内容排成一行。我知道我可以浮动它，但是对于我页面上的其他元素（此处未显示），我需要使用更标记的“clearfix”。我只需要针对 IE8，并且很想知道为什么内联块在显然受支持时对我不起作用。上面的代码在谷歌浏览器中查看时做了我想要的。
回答by Patrickdev
I'm guessing you haven't declared a doctype. Try placing this on the first line, before the html tag:
我猜你还没有声明文档类型。试着把它放在第一行，在 html 标签之前：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The code you pasted works in IE8 with that doctype.
您粘贴的代码适用于该文档类型的 IE8。
回答by cato_minor
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.
并非所有 IE8 版本似乎都同样有效。我发现给定的代码，即使使用 DOCTYPE，在早期版本 IE 8.0.6001.18702 中也不起作用。
However, the workaround for lower IE versions did its job on that particular IE 8 as well:
但是，较低 IE 版本的解决方法也适用于该特定 IE 8：
<!--[if lt IE 8]>
<style type="text/css">
li { display: inline; }
</style>
<![endif]-->
回答by mentat
You can set margin-right:1px
您可以设置 margin-right:1px
worked for me pretty well.
为我工作得很好。
回答by Idra
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.
根据我的经验，使用通用方式 (IE6+) 声明内联块总是更好的主意。即使每次我都试图说它只受较新的浏览器支持时，即使您都针对较新的浏览器，某些客户仍然会弄乱他们的文档类型，然后销售人员说，它需要修复，因为客户仍然可以看到它并且不明白，这归结于他们的 IE 设置，而不是我们的错。更重要的是，当您将内联块用于结构性内容时，如果用户出于任何原因在较旧的 IE 上查看站点，它可以防止站点完全解体。
display: inline-block;
*zoom: 1;
*display: inline;
回答by John Anastasio
IE8 will treat it as a block level element unless you use float.
除非您使用浮动，否则 IE8 会将其视为块级元素。
.divInlineBlock
{
display: inline-block;
float: left;
}
回答by Chris
Note that IE8 will act like IE7 if you are viewing an intranet site, which can happen as you develop! See this StackOverflow question:
请注意，如果您正在查看 Intranet 站点，IE8 将像 IE7 一样运行，这可能会随着您的开发而发生！请参阅此 StackOverflow 问题：
回答by Jason
For IE8 - you can add a specific declaration:
对于 IE8 - 您可以添加特定声明：
display: inline-table;
display: inline-table;
which works great.
这很好用。
