卡片放進窄側欄擠成一團：用容器查詢按可用寬度排版
同一張卡片放在主內容很寬，放進側欄卻擠成一團，單靠視窗寬度不一定夠。使用@container可以按祖先容器的可用寬度決定排版，讓卡片在寬區橫排、窄區直排，即使它...
CSS z-index設很大仍被蓋住：先找父層堆疊情境
提示面板的z-index已經設到9999，仍被另一個區塊蓋住，先看它的父層是否建立了獨立的堆疊情境。子元素的數字只能參與所在情境裡的排序，不能直接拿9999跨過...
CSS order改了畫面排列：Tab為何仍照DOM走
工具列把「預覽」移到最前面，Tab卻先停在第二個位置的「儲存」。CSS的order改變了視覺排列，沒有一起改掉DOM順序。滑鼠使用者看到的新位置，與鍵盤依序走到...
CSS樣式一直蓋不掉：用where降低基礎選擇器權重
模板原本的卡片標題是藍色，你在後面加上紅色規則，畫面卻還是藍色。先別急著補!important：後寫的規則不一定會贏，選擇器的權重也會影響結果。若你正在製作可被...
減少動態偏好怎麼處理：保留內容與操作的CSS做法
商品卡滑入、背景持續漂浮、按鈕點下去再放大，單看每個效果都不算誇張，放在同一頁卻可能讓人不舒服。有些使用者已在作業系統設定減少動態，網站可以透過prefers-...
長網址把文章撐出螢幕：區分overflow-wrap與word-break
文章裡貼了一條長網址，閱讀區卻被它撐出螢幕。先分清是文字沒有可用斷點，還是容器本身寫死寬度；兩種原因看起來相似，修改位置不同。 要讓讀者看完整網址，通常不必截成...
CSS黏住的側欄沒生效：檢查容器高度與overflow
側欄已寫position:sticky，捲動後卻整塊跟著消失。先別急著改成fixed；sticky會受到捲動祖先、容器邊界與元素高度限制，設定本身生效，仍可能沒...
網站卡片圖片還沒載入就跳動：先保留正確比例
文章列表剛出現，準備點卡片，圖片突然載入，把標題和連結往下推了一截。圖片本身可能沒有變形，下載的尺寸也正確；問題是瀏覽器在圖到之前，不知道要替它留多高。 先保留...
網站搬進子目錄後圖片不見：查相對URL從哪裡算
首頁圖片正常，文章搬進子目錄後卻不見了；檔名沒變，上傳的圖也還在。這時先看瀏覽器把圖片網址算成什麼。相同的 src="images/cover.svg"，放在不...
手機橫向比較表怎麼提示可捲動，又不遮住欄名
在手機開啟方案比較表，只看到第一個方案，旁邊沒有捲軸，也沒有提示。訪客很容易以為後面沒有內容。把表格縮到每個字都擠成一列，雖然不再超出螢幕，卻更難比較。 多個方...
MacCMS 模板更新後字體或按鈕沒變：分清CSS請求與瀏覽器快取
模板更新後，首頁標題已換，按鈕顏色和字體卻完全沒變。這時先追瀏覽器實際載入的 CSS：HTML 用了哪個樣式網址、那個網址回來什麼內容、目標元素最後採用了哪條規...
CSS gap 怎麼用：卡片換行後，間距也保持一致
卡片換行後，右邊多出一段空白，或第二排離第一排太近，常見原因是把間距寫在每張卡的 margin 上。當需求是「項目之間留一樣的距離」，可以讓 Flex 或 Gr...
- 1
- 2