Html IE7 不理解显示：inline-block
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6544852/
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
IE7 does not understand display: inline-block
提问by lanthuong
Can someone please help me get my head around this bug? With Firefox its working fine but with Internet Explorer 7 its not. It seems not to understand the display: inline-block;.
有人可以帮我解决这个错误吗？使用 Firefox 可以正常工作，但使用 Internet Explorer 7 则不行。好像没看懂display: inline-block;。。
html:
html：
<div class="frame-header">
<h2>...</h2>
</div>
css:
css：
.frame-header {
height:25px;
display:inline-block;
}
回答by kapa
The IE7 display: inline-block;hack is as follows:
IE7 display: inline-block;hack 如下：
display: inline-block;
*display: inline;
zoom: 1;
By default, IE7 only supports inline-blockon naturally inlineelements (Quirksmode Compatibility Table), so you only need this hack for other elements.
默认情况下，IE7 仅支持inline-block自然inline元素（Quirksmode 兼容性表），因此您只需要对其他元素进行此 hack。
zoom: 1is there to trigger hasLayoutbehaviour, and we use the star property hackfor setting the displayto inlineonly in IE7 and lower (newer browsers won't apply that). hasLayoutand inlinetogether will basically trigger inline-blockbehaviour in IE7, so we are happy.
zoom: 1有没有到触发hasLayout行为，我们用星级酒店的黑客用于设置display要inline在IE7和仅低（较新浏览器将不适用这一点）。hasLayout和inline在一起基本上会触发inline-blockIE7 中的行为，所以我们很高兴。
This CSS will not validate, and can make your stylesheet messed up anyways, so using an IE7-only stylesheet through conditional commentscould be a good idea.
此 CSS 不会验证，并且无论如何都会使您的样式表混乱，因此通过条件注释使用仅限 IE7 的样式表可能是一个好主意。
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
回答by yunzen
Update
更新
As nobody uses IE6 and 7 anymore I will present a different solution:
You don't need a hack anymore, because IE8 supports it by itself
由于没有人再使用 IE6 和 7，我将提出一个不同的解决方案：
您不再需要 hack，因为 IE8本身就支持它
For those who must support those stone age browsers before IE8 (It's not that the IE8 is that old, too cough):
For the account of IE version control, use some Conditional Class in <html>tag like Paul Irishstates in his article
对于那些必须支持IE8之前的石器时代浏览器的人（不是IE8那么老，太咳）：
对于IE版本控制的说明，在<html>标签中使用一些Conditional Class，就像Paul Irish在他的文章中所说的那样
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
By this you will have different classes in html-tag for different IE Browsers
通过这种方式，您将为不同的 IE 浏览器在 html-tag 中拥有不同的类
The CSS you need is as follows
你需要的CSS如下
.inline-block {
display: inline-block;
}
.lt-ie8 .inline-block {
display: inline;
zoom: 1;
}
This will validate and you don't need an extra CSS file
这将验证并且您不需要额外的 CSS 文件
Old answer
旧答案
.frame-header
{
background:url(images/tab-green.png) repeat-x left top;
height:25px;
display:-moz-inline-box; /* FF2 */
display:inline-block; /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
回答by Iladarsda
IE7 does not support 'inline-block' properly, more info here: LINK
Use can use: 'inline' instead.
IE7 不正确支持 'inline-block'，更多信息在这里：LINK
Use can use: 'inline' 相反。
What exactly are you trying to achieve? Make us an example and put here: http://jsfiddle.net/
你到底想达到什么目的？让我们举个例子并放在这里：http: //jsfiddle.net/
回答by MiddleKay
use inline, it works with this kind of selectors for list items:
使用内联，它适用于列表项的这种选择器：
ul li {}
or to be specific:
或者具体来说：
ul[className or name of ID] li[className or name of ID] {}
