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

— Lanthuong
ソース

1

正確に何を達成するのですか？どんな効果？

— Iladarsda

302

IE7 display: inline-block;ハックは次のとおりです。

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

デフォルトでは、IE7 inline-blockは自然inlineな要素のみをサポートします（Quirksmode互換性テーブル）でため、このハックは他の要素に対してのみ必要です。

zoom: 1トリガーにありhasLayout振る舞い、そして我々は、使用つ星ホテルにハックを設定するためdisplayにinline（新しいブラウザがそれを適用されません）のみIE7で下を。hasLayoutそして、inline一緒に基本的にトリガされますinline-block、我々は満足しているので、IE7で動作します。

このCSSは検証されないため、スタイルシートが混乱する可能性があるため、条件付きコメントで IE7のみのスタイルシートを使用することをお勧めします。

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

— カパ
ソース

40

私*zoom:1;はhasLayoutをトリガーすることを好みます。それはより明確だだから *zoomとは*display一緒に行く

— yunzenを

4

@RoshanWijesena w3schoolsはw3cとは何の関係もなく、ie7の当局でもありません

— Musa

1

@RoshanWijesena w3schoolsは良いリソースではなく、公式でもありません。それに依存しないでください。彼らが何かについて言及したり言及しなかったりするという事実は、実際には何も意味しません。

— kapa 2013

1

みんなありがとう！だから私はただ疑問に思って公式ドキュメントとして何を使用すべきですか！

— Roshan Wijesena 2013

2

@RoshanWijesena W3Cの公式ページであるw3.orgに公式の標準仕様があります。developer.mozilla.orgは、参考としてw3schoolsの代わりに使用できる優れたリソースです。

— kapa 2013

8

更新

IE6と7を使用する人はもういないので、私は別のソリューションを
紹介します。IE8 がそれ自体でサポートしているため、ハッキングはもう必要ありません。

IE8より前の石器時代のブラウザーをサポートする必要がある場合（IE8がそれほど古く、咳が多すぎるということではありません）：
IEのバージョン管理の説明として、Paul Irishの<html>ようなタグでいくつかの条件付きクラスを使用します。で述べて彼の記事

<!--[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タグにさまざまなクラスがあります。

必要な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 */
}

— 雲仙
ソース

上記で示したCSSは理にかなっていますが、HTMLでどのように機能するのでしょうかありがとう。

— StephenESC 2014

@StephenESCには2つの方法があります。要素にクラスinline-blockを追加しframe-headerます。または、CSSセレクターで変更inline-blockしframe-headerます。

— yunzen '13

1

IE7は「インラインブロック」を適切にサポートしていません。詳細はこちら：LINK
使用できるもの： 'inline'。

正確に何を達成しようとしていますか？私たちに例を作ってここに入れてください：http : //jsfiddle.net/

— イラダルスダ
ソース

0

インラインを使用して、リスト項目のこの種のセレクターと連携します。

ul li {}

または具体的に：

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

— ミドルケイ
ソース

2

inlineと同じではありませんinline-block。たとえばheight: 25px;、例のは、要素がの場合は有効になりませんinline。また、質問はリストについては何も述べていません。

— kapa 2013