web-dev-qa-db-ja.com

IE CSS表示:インラインブロックレンダリングの問題

IE私のコードは

CSS:

div {
    display: inline-block;
    margin-right:40px;
    border: 1px solid;
}

HTML:

<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>

これは、Firefox/Chromeでの表示です(予想される表示)。

enter image description here

これはIEでの表示です

enter image description here

IEがdisplay:inline-blockをサポートしている場合、私はグーグルしました、そして明らかにそうです。

18
AlanFoster

DOCTYPEをHTMLに追加し、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

これを追加した後、それは私のために動作します。

注:jsFiddleでは、DOCTYPEが自動的に生成されるため、そこで機能します。

編集1:詳細については this を確認し、

編集2:インラインブロックのスタイリングについて詳しく読む ここ

13

実用的なソリューション

以下は正しく動作するようです:

  • 癖モード
  • IE 7標準
  • IE 8標準
  • IE 9標準
  • IE 9互換モード

<!DOCTYPE html>
<html>
<head>
    <style>

    DIV {
        display: inline-block;
        *display: inline; /* leading asterisk IS correct */
        margin-right:40px;
        border: 1px solid;
        zoom: 1; /* seems to fix drawing bug on border in IE 7 */
    }

    </style>

</head>
<body>
    <div>element</div>
    <div>element</div>
    <div>element</div>
    <div>element</div>
    <div>element</div>
</body>
</html>

回答履歴

http://jsfiddle.net/3sK4S/

IE9標準モードでうまく動作します。 Quirksモードでは(説明したとおり)正しく表示されません。

IE9でのテスト:

  • Quirksモード:ブロック(不正)
  • IE 7標準:ブロック(不正)
  • IE 8標準:インライン(正しい)
  • IE 9標準:インライン(正しい)
  • IE 9互換モード:インライン(正しい)

IE7をだますには:

div {
    display: inline-block;
    *display: inline; /* leading asterisk IS correct */
    margin-right:40px;
    border: 1px solid;
}

この記事 から取得。 IE 7エミュレーションモードで動作します。

Doctypeに関する@SKSコメントに従って、Doctypeを指定して完全なソリューションを追加しました。

15
Tim Medora

私はこのコードを追加して働いた:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

ヘッダー情報に。

5
maycza

IEには有効なCSSハックがありますが、かなりの数があります。

  1. hasLayout

    hasLayout: true;

    ---どうやら、IE7(?)レンダリングに、グローバルルールではなく要素のCSSレイアウトルールを強制する

  2. * 表示

    *display: inline;
    zoom: 1;
    

    -スターハック。これは、divをインライン要素として整列させるレンダリングエンジンを「トリック」しているようです。

  3. float

    float:left;

    -古き良きフロート、IE6でもサポートする必要がありますが、なぜIE6を心配する必要があるのか​​はわかりませんが、中国のブラウザの統計では、IE6がまだ中国でかなり人気があることを示しているようです。去年のいつか。個人的には、北朝鮮は心配するべきではないと思いますが、それは私だけです。

ただし、これらすべてのハックを回避して、HTML Shim(Shiv)と呼ばれるGoogleオンラインコードプロジェクトを支持する別の方法があるようです。これを含める目的は、HTML9をサポートするためにすべてのIE v9より前のバージョンを作成することです。インラインブロックを機能させるために、上記のすべてを使用する必要がないことに気付きました。 。これは、JavaScriptを追加してもかまわない場合にのみ有効です。一方で、最近JavaScriptを使用しない人はいますか?

もちろん、quirksモード(互換性)または標準モードもありますので、最初に有効なdoctypeを追加してください。 HTML5の場合、より簡単です。

<?DOCTYPE html>

(?)どのバージョンかわからないが、互換モードで7を読んだと思う

3
Shubhojoy Mitra
div {
    display: block;
    margin-right: 40px;
    float: left;
    border: 1px solid;
}

問題はIE7以前でのみ発生しますが、これで解決します。

0
Rajat Singhal