重構視角的細節（代碼可讀性、圖片優化等）是基本功；真正的細節是發自內心對用戶的關懷。兩個常見模塊實戰：

輪播圖按鈕：把 22×2px 的痛點變成 22×12px 的舒心區

切換按鈕是核心交互入口，原設計可點區域僅 22×2px，操作極痛。視覺堅持原尺寸，重構另闢蹊徑：

• 方案 1：改大按鈕 → 視覺拒絕、流程長、成本高
• 方案 2：CSS 控制視覺不變、點擊區域放大

CSS 實現對比

• 結構：`
• 1
`，a 標簽承載色塊與點擊
• height+padding：背景色延伸至 padding，兼容性差
• height+border：IE6/7 正常，現代瀏覽器 border 也被填充背景色（囧）
• height+偽元素 :after/:before：現代瀏覽器完美，IE6/7 不支持偽元素色塊消失

最終方案：主流瀏覽器用 `height+偽元素`，IE6/7 hack 用 `height+border`。點擊區域從 22×2px 擴大到 22×12px（6 倍），操作舒心。線上效果：daquan.xunlei.com

導航聚焦：別讓 outline:none 斷了盲人路

為美觀去虛線框：`outline:none` + IE `hidefocus="true"`。但 `onfocus="this.blur()"` 會中斷視障用戶 Tab 路徑，極不友好。淘寶 UED 文《盲人站長深惡痛絕的 onfocus="this.blur()"》深刻揭露。

虛線框有合理性：鼠標壞時靠 Tab 找鏈接，虛線框是救命稻草。去虛線框違背初衷，兼容 hack 違背分離原則。

最佳實踐：

1. 導航 `a:focus` 偽類樣式 = `:hover` 樣式，顯示 Tab 選中態
2. IE6/7 不支持 `:focus`，保留原生虛線框，優雅降級，保證 Tab 可達

Opera 需 Ctrl+方向鍵選中鏈接，`outline:none` 不生效，補充 `E:focus{outline:1px solid transparent}` 解決。Demo

普通用戶或不用 Tab，但關鍵位置鏈接必須照顧特殊群體。重構工程師，小成本大溫度，為何不做？