翻成英文、日文後頁面跑版，多語網站怎麼修

為什麼會這樣 #

英文比中文長三到五成，日文的標點與換行規則又不一樣，寫死寬度的按鈕、卡片標題、mega menu 欄位就會被撐開或折成兩行。佈景設定的西文字型如果沒有日文字，瀏覽器會退回系統字型，行高、粗細整個變掉。更常見的是模板分身：在 WPML 加 Elementor 的架構下，每個語言的頁首、頁尾、區塊都是獨立副本，你在英文版刪掉一個圖層，日文版還留著。最後是語言切換器本身，插進頁首後把導覽列擠下去。

怎麼處理 #

1. 開兩個視窗放同一頁的兩個語言，按 F12 檢查跑掉的元素，看差的是寬度、行高還是 font-family。
2. 字長問題：按鈕與標題改用最小寬度加自動換行，不要寫死；長句改短句。
3. 字型問題：在佈景或 Elementor 的全站字型設定加上該語言的後備字型，例如日文加 Noto Sans JP，中文加 Noto Sans TC。
4. 模板問題：修好一個語言後，到另一個語言的同一個模板再做一次；或改寫在全站自訂 CSS 用共用 class，一處改全部語言。
5. 切換器問題：改成下拉或圖示，放進既有的選單項目，而不是另外多一列。
6. 改完清快取，手機再看一次，行動版跑版的機率比桌機高。

我們實際遇過的情況 #

一家外銷製造商的日文頁跑版，是日文字型後備沒設定，整頁行高跟其他語言不同。同一個站有一塊白色背景怎麼刪都刪不掉，客戶只在英文版找到並移除，其他語言各自的模板都還留著那個圖層。一家清潔服務公司加上語言切換器後頁首跟版，改成下拉式切換器就解決。

什麼時候該找人 #

跑版是在更新佈景、Elementor 或 WPML 之後才出現的話，多半是相容性問題，硬加 CSS 只是把症狀蓋住，下次更新又會回來。

網站正在跑版、更新後壞掉？網站救援當日受理；想有人每月幫你顧著更新：網站守護方案。