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をサポートしている場合、私はグーグルしました、そして明らかにそうです。

htmlcssinternet-explorerrendering
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
Selvakumar Arumugam

実用的なソリューション

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

  • 癖モード
  • 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