先看這個例子
每段至少佔 24px。hidden 段落保留框,display:none 段落不產生框。基準字級時,「後面」比「前面」低 48px。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 隱藏段落 | 查看外框及 visibility | 框保留;基準字級為 24px |
| 不產生框的段落 | 查看 display 及外框 | display:none;量度高度為 0 |
| 原文 | 查看 DOM 文字 | 兩段文字仍在來源樹內 |
瀏覽器怎樣處理
Visibility 在本例控制顯示,但保留框;display:none 則不產生框。兩者都不刪 DOM 文字。放大文字可能令最小高度框增高,因此 48px 基準結果不能套用到放大後。
opacity 不等同移除版面框
反例讓段落透明,不是移除其框。
<style>body{margin:8px}</style>
<style>p{margin:0;min-height:24px}.transparent{opacity:0}</style><p>前面</p><p class="transparent">透明筆記</p><p id="after">後面</p>透明段落仍有版面框,本例中心位置也仍可被命中;不能當作 display:none。
試着修正
只把 opacity 設為零,足以證明內容已退出版面和操作嗎?
查看參考答案
不足夠。要查實際框和操作;opacity 本身只改繪畫透明度。
- 各框及最後段落位置都要量。
- DOM 是否存在與畫面有沒有顯示分開。