沒有單位的 CSS 屬性:回退到 PX
在 CSS 中,從屬性值中省略單位似乎很方便。但是,這樣做可能會導致意外的回退情況。在怪異模式下,瀏覽器在遇到無單位屬性時可能表現不一致。本文研究了回退行為、其意義以及跨瀏覽器的不一致。
回退到PX
當CSS 屬性缺少單位(例如“px”)時, “em”或“%”,瀏覽器可能預設為後備單位。在怪異模式下,許多瀏覽器選擇“px”作為後備單位。此行為與接受像素長度為無單位值的舊版 HTML 屬性一致。
但是,此行為在不同瀏覽器中並不一致。某些瀏覽器(例如標準模式下的 Internet Explorer 7 及更高版本)會忽略缺少單位的規則屬性,而其他瀏覽器(例如 Chrome、Firefox 和 Safari)則繼續回退到「px」。
W3C 規範
CSS 的 W3C 規範規定所有非零長度值必須有單位。因此,無單位屬性無效。本規範適用於標準模式渲染。在怪異模式下,瀏覽器可以更自由地實現怪異行為,這可以解釋回退行為的變化。
強制回退規則
沒有強制執行的特定規則瀏覽器回退到首選單位。此決定由瀏覽器自行決定,並可能根據瀏覽器版本、渲染模式和涉及的特定屬性而有所不同。
範例行為
網路Explorer 在怪異模式和標準模式下的行為有所不同。在怪異模式下,它用於將寬度和邊框寬度回退到“px”。但是,在標準模式下,它會忽略缺少單位的屬性規則。
Firefox 與 Internet Explorer 的不同之處在於怪異模式。它將寬度回落到“px”,但忽略邊框寬度屬性。 Chrome、Opera 和 Safari 在怪異模式下都將 width 和 border-width 回退為「px」。
結論
不鼓勵在 CSS 中使用無單位屬性。它可能會導致意外結果和瀏覽器不一致,尤其是在怪異模式下。遵守為所有長度值指定單位的 W3C 建議將確保跨瀏覽器的一致渲染。
以上是Q:當 CSS 屬性在 Quirks 模式瀏覽器中缺少單位時會發生什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!