ホームページ >ウェブフロントエンド >CSSチュートリアル >インライン ブロック表示が IE8 で動作しないのはなぜですか?
インライン ブロック表示が IE8 で動作しないのはなぜですか?
- Patricia Arquetteオリジナル
- 2024-10-29 21:35:02827ブラウズ
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 サイトの他の関連記事を参照してください。