インラインブロック表示が IE8 で動作しないのはなぜですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

インラインブロック表示が IE8 で動作しないのはなぜですか?

Patricia Arquette

Oct 29, 2024 pm 09:35 PM

Why Is My Inline-Block Display Not Working in IE8?

IE8: ディスプレイのインラインブロックの問題のトラブルシューティング

Web 開発の領域では、特定の視覚的なレイアウトを実現しようとすると、共通の課題が生じます。プログラマー向け。このプロセスの 1 つの側面には、特にさまざまなブラウザ環境で要素を正しく配置することが含まれます。開発者の間で不満を引き起こす要素の配置方法の 1 つは、インラインブロック表示です。

問題:

次のコードスニペットを考えてみましょう:

<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 で望ましい結果は、要素をインラインに配置することです。ただし、IE8 はインラインブロックをサポートしているとされているにもかかわらず、この調整を達成しようとする試みは失敗に終わっています。

解決策:

驚くべきことに、犯人はインラインにあるわけではない可能性があります。 -block 宣言自体。代わりに、Doctype が欠落しているため、IE8 での正しい表示動作が妨げられている可能性があります。この問題を修正するには、次の doctype 宣言を HTML の最初の行として追加します。

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

ログイン後にコピー

説明:

doctype 宣言は、ブラウザーに次の操作を指示します。特定のモードで、指定された HTML 仕様との互換性を確保します。 doctype がないと、IE8 はデフォルトの互換モードを使用し、インラインブロック表示が正しく表示されない可能性があります。 doctype を使用してレンダリングモードを明示的に定義することで、この動作をオーバーライドし、必要なインラインブロックの配置を有効にします。

以上がインラインブロック表示が IE8 で動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。