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

Patricia Arquette
リリース: 2024-10-29 21:35:02
オリジナル
745 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!