為什麼我的內聯區塊顯示在 IE8 中不起作用？-css教學-PHP中文網

為什麼我的內聯區塊顯示在 IE8 中不起作用？

Patricia Arquette

發布： 2024-10-29 21:35:02

原創

744 人瀏覽過

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

IE8：解決顯示內聯塊問題

在Web 開發領域，渴望實現特定的視覺佈局是一個常見的挑戰對於程序員來說。此過程的一方面涉及確保正確的元素對齊，尤其是在各種瀏覽器環境中。一種經常讓開發人員感到沮喪的元素定位方法是內聯塊顯示。

問題：

考慮以下程式碼片段：

<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 聲稱支持內聯塊，但事實證明實現這種對齊的嘗試並不成功。

解決方案：

令人驚訝的是，罪魁禍首可能並不在於內聯-區塊聲明本身。相反，缺少的文件類型可能會妨礙 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 規範相容。如果沒有文件類型，IE8 可能會採用預設的相容模式，從而可能無法正確渲染內聯塊顯示。透過使用文件類型明確定義渲染模式，我們可以覆寫此行為並啟用所需的內聯塊對齊。

以上是為什麼我的內聯區塊顯示在 IE8 中不起作用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

為什麼我的內聯區塊顯示在 IE8 中不起作用？