題干與適用場景
設計系統中的狀態圖示、單位符號和內嵌 SVG 需要和正文、按鈕文字及數學公式對齊。開發者用負的 top 或 transform 修正後，在字型替換、不同行高和 RTL 頁面中出現漂移。請設計基於 CSS 基線的方案，並說明 baseline-shift、SVG 基線、回退策略、可及性和視覺回歸測試。
面試官考察點
- 是否理解 inline formatting context、字型基線、上標/下標和替代基線。
- 能否區分
baseline-shift與vertical-align、transform的職責。 - 能否處理 HTML 文字與 SVG 內容的跨瀏覽器差異。
- 是否會保留可讀文字、焦點順序和 RTL 語義，而不是只追求像素。
- 能否用字型矩陣、快照和真實瀏覽器覆蓋驗證。
回答前需要釐清的問題
- 圖示是裝飾性還是傳達狀態？是否有可見文字和螢幕閱讀器名稱？
- 目標是普通內嵌圖示、上標單位、公式，還是 SVG 內部的文字？
- 需要支援哪些瀏覽器、字型載入失敗和縮放級別？
- 對齊基準是字母基線、數學基線、SVG dominant-baseline，還是視覺中心？
- 元件是否支援 RTL、動態字型大小和使用者強制高對比度？
30 秒回答
我會先定義語義基線：正文圖示通常跟隨字母基線，公式或上標才使用明確的上移量。優先讓圖示參與 inline formatting context，用 baseline-shift 表達相對基線的意圖，不把 transform 當成排版規則；vertical-align 負責行內盒的對齊方式，二者不能混為一談。對 SVG 統一 viewBox 和基線策略，舊瀏覽器提供 vertical-align 或尺寸回退。裝飾圖示隱藏，狀態圖示保留文字和名稱；測試字型載入、縮放、RTL、SVG 和瀏覽器快照。
分步驟深入解答
1. 先確定基線語義
基線不是盒子的垂直中心。正文圖示通常應與字母基線對齊；上標、下標和數學符號則有不同的基線關係。先把視覺需求寫成「相對目前行基線上移/下移」，再決定 CSS 屬性，避免為每個字型寫魔法像素。
.status-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: baseline;
baseline-shift: 0.08em;
}範例中的偏移只是元件設計令牌，不能假設適用於所有字型；應透過真實字型和字級測量確定。
2. 分清 baseline-shift、vertical-align 與 transform
baseline-shift 表達相對基線的偏移，適合上標、下標和需要保持排版關係的內嵌內容。vertical-align 參與行內盒、表格儲存格或指定基線的對齊。transform: translateY() 只改變繪製位置，不改變行盒計算，可能造成點擊區域、溢出和後續文字關係不一致。
3. 處理 SVG 與字型差異
為 SVG 設定穩定的 viewBox，避免路徑本身留白導致視覺誤差。內嵌 SVG 的基線行為還受替代基線和 dominant-baseline 影響；不要只在 Chrome 中目測。對圖示元件提供預設基線、上標和下標變體，減少呼叫方重複覆蓋。
4. 設計回退層
偵測屬性支援後再啟用精細偏移；不支援時使用 vertical-align、尺寸或 line-height 的保守方案。回退應保持可讀和可點擊，不能把不可見文字擠出螢幕。字型尚未載入時先採用系統字型可接受的基線，字型載入後透過穩定令牌而非腳本逐幀修正。
5. 可及性與國際化
裝飾圖示使用空替代文字並避免重複朗讀；表達狀態的圖示必須有文字或可及名稱。不要把上移位置當作語義，RTL 只改變書寫方向，不應改變垂直基線。使用者放大字型、強制高對比度和減少動效時，元件仍需保持清晰和可操作。
6. 測試和回歸門禁
測試矩陣覆蓋常用字型、字型載入失敗、字級 12–32px、不同 line-height、SVG 路徑、上標/下標、RTL、瀏覽器和縮放。截圖比較應關注基線偏差、行高變化、裁剪和點擊區域；同時執行可及性檢查。發現偏差時先判斷基線模型還是資源留白錯誤，不要繼續堆疊 transform。
高品質示範回答
我先把需求分成正文圖示、上標/下標和 SVG 文字三類，因為它們的基線不同。正文圖示加入行內格式上下文，用 baseline-shift 表達相對目前基線的偏移；vertical-align 負責行內盒對齊，transform 只作為無法改變排版時的最後視覺修正。SVG 使用穩定 viewBox，並測試替代基線和路徑留白。
我會提供屬性支援回退、系統字型和舊瀏覽器策略，保證點擊區域與可讀文字不受影響。裝飾圖示隱藏，狀態圖示有名稱。測試覆蓋字型、字級、行高、SVG、RTL、縮放和截圖回歸；偏差先回到基線語義與資源幾何檢查，而不是增加更多魔法數字。
常見錯誤
- 把基線當成盒子中心，用一個
translateY解決所有字型。 - 認為
vertical-align、baseline-shift和transform完全等價。 - 只測試 Chrome 預設字型，不測試字型載入失敗、縮放和 RTL。
- SVG
viewBox有額外留白，卻把問題歸因於 CSS。 - 裝飾圖示被螢幕閱讀器重複朗讀，或狀態圖示沒有可及名稱。
- 用腳本測量每幀位置，造成佈局抖動和維護成本。
追問及應對
為什麼不用固定的 top: -2px？
它依賴特定字型、字級和行高，不能表達基線意圖，也不參與行盒計算。相對基線的令牌更容易隨排版上下文調整和測試。
SVG 路徑看起來仍然偏低怎麼辦？
先檢查 viewBox 留白、路徑幾何和 SVG 的替代基線，再調整元件基線令牌。不要直接把每個圖示單獨加 transform，導致設計系統無法統一。
屬性不支援的瀏覽器如何保證體驗？
提供 vertical-align 和尺寸的保守回退，保持可讀、可點擊和不裁剪；將精確偏移作為增強，並用真實瀏覽器截圖確認回退沒有破壞行高。