CSS Calc 的替代品
CSS calc() 函數提供了一種在 CSS 規則內執行數學計算的便捷方法。但是,對於舊版瀏覽器和某些行動瀏覽器,其支援是有限的。本文探討了一種在不使用 calc() 的情況下實現動態調整大小的替代方法,特別是針對 IE 5.5 及更高版本、Opera 和 Android 瀏覽器。
雖然可以在 IE-OLD 中使用 expression() 屬性支援類似 calc 的語法,但它已被棄用,並且使用它會引起安全問題。相反,請考慮採用 CSS box-sizing 屬性和 border-box 值。這種方法涉及使用 padding 和 margin,而不是從 width 屬性中減去,以實現所需的尺寸。
例如,讓我們以原始問題中提供的範例為例,其中固定寬度的側邊欄會影響相鄰內容的寬度。我們可以使用以下程式碼實現相同的效果,而不是在內容元素上使用width: calc(100% - 300px):
透過設定box-sizing: border-box,元素的寬度包括其內邊距和邊框,而不是將它們視為元素盒模型之外的附加空間。這允許 padding-left 有效地減少內容元素的可用寬度,而不會影響 CSS 中聲明的實際寬度。
這種方法不僅在 IE 5.5 及更高版本中受支持,而且在 Opera 和Android 瀏覽器,為各種瀏覽器提供一致的解決方案。
以上是在舊版瀏覽器中,如何在不使用 CSS Calc() 的情況下實現動態調整大小?的詳細內容。更多資訊請關注PHP中文網其他相關文章!