標籤與table高度100% （轉）

時間 2019-11-10

標籤標籤 table 高度 100% 简体版

原文原文鏈接

<!DOCTYPE>標籤可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。html

三種HTML文檔類型:瀏覽器

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。框架

a ) 若是須要乾淨的標記，免於表現層的混亂，用HTML Strict DTD類型：ui

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">spa

b )Transitional DTD 可包含 W3C 所指望移入樣式表的呈現屬性和元素. 若是用戶使用了不支持層疊樣式表（CSS）的瀏覽器以致於你不得不使用 HTML 的呈現特性時，用 Transitional DTD 類型：htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">對象

c ) Frameset DTD 被用於帶有框架的文檔。除 frameset 元素取代了 body 元素以外，Frameset DTD 等同於 Transitional DTD：圖片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">文檔

三種 XML 文檔類型：it

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

a ) 若是須要乾淨的標記，免於表現層的混亂，用XHTML Strict DTD類型：

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

b )Transitional DTD 可包含 W3C 所指望移入樣式表的呈現屬性和元素. 若是用戶使用了不支持層疊樣式表（CSS）的瀏覽器以致於你不得不使用 HTML 的呈現特性時，用 Transitional DTD 類型：

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

c ) Frameset DTD 被用於帶有框架的文檔。除 frameset 元素取代了 body 元素以外，Frameset DTD 等同於 Transitional DTD：

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

XHTML 1就是HTML 4.01的XML化，是一種不向前兼容的格式。

HTML 4.01 中的 doctype 須要對 DTD 進行引用，由於 HTML 4.01 基於 SGML。

SGML規定了在文檔中嵌入描述標記的標準格式，指定了描述文檔結構的標準方法，目前在WEB上使用的HTML格式即是使用固定標籤集的一種 SGML文檔。

有關瀏覽器工做模式大體可分爲三種：Standarded Mode， Almost Standarded Mode及Quirks Mode。

Standarded Mode最爲嚴格，即頁面要求最規範，最符合W3C標準，又稱爲Strict Mode；

Almost Standarded Mode是當前使用最普遍的工做模式，是一種由不規範到規範過渡（其實它與Standarded Mode區別並不大，僅在圖片顯示及少許腳本解析上存在差別）。

Quirks Mode是指瀏覽器模擬早期瀏覽器版本，爲了適應早期頁面中不規範的標籤等；

瀏覽器在加載頁面時，首先根據文檔對象類型定義來判斷當前頁面是應該使用哪一種工做模式來渲染頁面以達到頁面定義者的預期效果。

一個對象高度是否可使用百分比顯示，取決於對象的父級對象。Table在body之中，所以它的父級是body，而瀏覽器在標準模式下，是沒有給body一個高度屬性的，所以當設置height:100%;時，不會產生任何效果（內容根據高度自適應），而當給body設置了100%以後（相對於html標籤），它的子級對象Table的height:100%便發生做用了，這即是瀏覽器解析規則引起的高度自適應問題。值得注意：Firefox中的HTML標籤不是 100%高度，所以給兩個標籤都定義爲height:100%;以保證兩個瀏覽器下均可以正常顯示。

解決方案：

（1）爲<html>與<body>標籤添加100%的高寬屬性。

（2）可直接刪除<!DOCTYPE>定義，這樣瀏覽器會工做在Quriks Mode下，body與html默認有高寬度，但不推薦這種方式。