web-dev-qa-db-ja.com

IE8がインラインブロックを表示しない

次のコードがあるとします

<style type="text/css" media="all">
  span, ul, ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    list-style: none;
  }   
</style>
<span>i would want</span>
<ul>
  <li>this</li>
  <li>on</li>
  <li>one line.</li>
</ul>

IE8でこれをインラインで表示したい。 IE 8はインラインブロックをサポートしています。しかし、試してみた朝、私は上記を揃えることができません。私はそれをフロートできることを知っていますが、ページの他の要素（ここには表示されていません）では、より多くのマークアップである 'clearfix'を使用する必要があります。 IE8をターゲットにする必要があるだけで、明らかにサポートされている場合にインラインブロックが機能しない理由を知りたいと思っています。上記のコードは、Google Chromeで表示したときに必要なことを行います。

cssinternet-explorer-8
49
tdh87

Doctypeを宣言していないと思います。これを最初の行のhtmlタグの前に配置してください：

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

貼り付けたコードは、そのdoctypeを使用してIE8で機能します。

50
Patrickdev

すべてのIE8バージョンが同じように機能するとは限りません。与えられたコードは、DOCTYPEがあったとしても、IE 8.0.6001.18702、初期バージョンでは動作しません。

ただし、下位のIEバージョンの回避策は、特定のIE 8でも同様に機能しました。

<!--[if lt IE 8]>
<style type="text/css">
    li { display: inline; }
</style>   
<![endif]-->
37
cato_minor

Margin-right：1pxに設定できます

私のためにかなりうまくいった。

18
mentat

私の経験では、インラインブロックを宣言する普遍的な方法（IE6 +）を使用することは常に良い考えです。新しいブラウザでのみサポートされていると言うたびに新しいブラウザをターゲットにしている場合でも、一部のクライアントはドキュメントの種類をいじっていますが、クライアントはそれを確認できるため、修正する必要がありますIE設定であり、私たちのせいではありません。構造ブロックにインラインブロックを使用している場合は、ユーザーが完全に崩壊するのを防ぎます。昔のIEで何らかの理由でサイトを表示する。

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

IE8は、floatを使用しない限り、ブロックレベル要素として扱います。

.divInlineBlock
{
   display: inline-block;
   float: left;
}
9
John Anastasio

IE8は、開発中に発生する可能性のあるイントラネットサイトを表示している場合、IE7のように動作することに注意してください。このStackOverflowの質問をご覧ください。

IE8をデフォルトでIE7としてレンダリングしますか？

5
Chris

IE8の場合-特定の宣言を追加できます。

display: inline-table;

うまくいきます。

3
Jason