IE7不理解显示：内联块

127

有人可以帮我解决这个错误吗？使用Firefox可以正常工作，但是不能使用Internet Explorer 7。好像看不懂了display: inline-block;。

的HTML：

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

CSS：

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

html internet-explorer-7 css

— 兰通
source

1

您到底要实现什么？有什么作用？

— Iladarsda

302

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

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

默认情况下，IE7仅支持inline-block自然inline元素（Quirksmode兼容性表），因此您仅需要针对其他元素进行破解。

zoom: 1是在那里触发hasLayout行为的，我们使用star属性hackdisplay来inline仅将IE7和更低版本中的设置为（新的浏览器不会应用）。hasLayout并且inline基本上可以一起触发inline-blockIE7中的行为，因此我们很高兴。

该CSS不会验证，并且可能使您的样式表变得混乱，因此通过条件注释使用仅IE7的样式表可能是一个好主意。

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

— 卡帕
source

40

我更喜欢*zoom:1;触发hasLayout。因此，更明确的是， *zoomand *display在一起

— yunzen

4

@RoshanWijesena w3schools与w3c无关，也与ie7无关

— Musa

1

@RoshanWijesena w3schools不是很好的资源，也不是官方的。不要依赖它。他们提到或不提及某事的事实并不意味着任何事情。

— kapa

1

多谢你们！所以我想知道什么才应该用作正式文档！

— Roshan Wijesena

2

@RoshanWijesena您可以在w3C的官方页面w3.org上找到官方标准规范。developer.mozilla.org是一个不错的资源，您可以使用它代替w3schools作为参考。

— kapa

8

更新资料

由于没有人再使用IE6和7，因此我将提出一个不同的解决方案：
您不再需要黑客，因为IE8 本身就支持它

对于那些必须在IE8之前支持那些石器时代的浏览器的人（不是IE8这么老，太咳嗽）：
对于IE版本控制，请在他的文章中使用一些条件类，<html>例如Paul Irish States

<!--[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 */
}

— 云禅
source

上面显示的CSS很有意义，但是HTML到底如何工作？谢谢。

— StephenESC

@StephenESC两种方式。将类添加inline-block到frame-header元素。或者改变inline-block通过frame-header在CSS选择器。

— yunzen 2014年

1

IE7不正确地支持“内联阻止”，更多信息在这里：LINK
Use可以使用：“ inline”代替。

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

— 伊拉达斯达
source

0

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

ul li {}

或具体来说：

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

— 中间凯
source

2

inline与相同inline-block。例如，height: 25px;当元素为时，示例中的不会生效inline。此外，该问题对列表没有任何说明。

— kapa