Question

有人可以帮我解决这个错误吗？ Firefox的工作正常，但Internet Explorer 7却没有。似乎不理解display: inline-block;。

HTML：

<div class="frame-header">
    <h2>...</h2>
</div>

的CSS：

.frame-header {
    height:25px;
    display:inline-block;   
}

Answer 1

IE7 display: inline-block;黑客攻击如下：

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

默认情况下，IE7仅支持自然inline-block元素inline上的zoom: 1，因此您只需要对其他元素进行此操作。

display会触发Quirksmode Compatibility Table行为，我们使用hasLayout仅在IE7及更低版本中设置inline至hasLayout（较新的浏览器）不适用）。 inline和inline-block基本上会在IE7中触发<!–-[if IE 7]> <link rel="stylesheet" href="ie7.css" type="text/css" /> <![endif]–->行为，所以我们很高兴。

这个CSS不会验证，并且无论如何都会使你的样式表搞砸了，所以通过star property hack使用仅限IE7的样式表可能是一个好主意。

{{1}}

Answer 2

更新

由于没有人再使用IE6和7，我将提出一个不同的解决方案：
您不再需要黑客了，因为IE8 supports it by itself

对于那些在IE8之前必须支持那些石器时代浏览器的人（这不是IE8那么老，也不是咳嗽）：
对于IE版本控制的帐户，请在Paul Irish

中的<html>标记中使用一些条件类，如his article个州

<!--[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]-->

通过这个，你将在不同的IE浏览器的html-tag中有不同的类

您需要的CSS如下

.inline-block {
    display: inline-block;
}
.lt-ie8 .inline-block {
    display: inline;
    zoom: 1;
}

这将验证，您不需要额外的CSS文件

旧答案

.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 */
}

Answer 3

IE7不支持'内联阻止'，更多信息请点击此处： LINK
使用可以使用：'inline'代替。

你到底想要达到什么目的？让我们举个例子并放在这里： http://jsfiddle.net/

Answer 4

使用内联，它适用于列表项的这种选择器：

ul li {}

或具体：

ul[className or name of ID] li[className or name of ID] {}

IE7不懂显示：内联块

4 个答案:

更新

旧答案