講到 CSS 我充其量只算是票友，但專案遇到問題還是得面對... Orz 本次的案例如下：
使用者回報某網頁用 Chrome 看正常，改在 IE 卻有部分段落的句子前方出現一大段空白，檢視 HTML 原始碼，發現編寫者輸入文字內容時，將段落裡的不同句子拆成多行，前方還加上 Tab 與上方對齊以求美觀。一般來說，HTML 文字出現的空白會被壓縮，接連的換行與空白符號只會被當成一個空白處理(要留白需改用    )，但由於套用 text-align: justify 左右貼齊，這些換行與 Tab 便在 IE 上產生非預期的結果。例如以下範例：
<html><head><meta http-equiv="Content-Type" content="text/html; encoding=UTF-8" /><style>
article { text-align: justify; }</style></head><body><article><section>故事是這樣的，有個內容網頁，其中一個段落由好幾句話組成。
製作者輸入內容時，在 HTML 原始碼換行輸入第二句話，前方加了 Tab 好與上一行對齊，各家瀏覽器看來都算正常，除了 IE11...
</section><article></body></html>經實測，這段 HTML 在 Chrome、Firefox、Edge 看起來都正常，除了 IE11，
由於 IE 出現的多餘空白會隨瀏覽器視窗寬度變長變短，推測這是 IE 在實作左右貼齊時將換行與 Tab 間隔開的文字視為可以拉長間隔的區塊，靠它調節整行寬度，試著移去換行與 Tab 讓前後文字相連問題即消失，可證明此一假設。掃瞄及修正網頁文字工程浩大，於是我嘗試透過樣式設定補救的做法，找到一解 – text-justify。
text-justify 尚未標準化，各家瀏覽器支援與實作狀況不一。例如，依據 MDN text-justify 有 auto、none、inter-word、inter-character、distribute(已廢除不建議使用) 幾種設定值，而 IE 則有以下選項：
- auto
預設值，瀏覽器自行決定演算法 (結果搞出一大片留白) - distribute
接近 newspaper 設定，但針對東方語系最佳化(例如: 泰文) - distribute-all-lines
與 distribute 相同，但最後一行也會左右對齊，適用表意文字(Ideographic Text) - distribute-center-last
未支援 - inter-cluster
將字與字間無空白文字左右貼齊，適用亞洲文字 - inter-ideograph
將表意文字左右貼齊，並同時加大或縮小表意文字及字間空白 - inter-word
增加字與字之間的空白，是最快讓所有行寬一致的做法，但不包含段落的最後一行 - kashida
阿拉伯文專用的貼齊方式 - newspaper
同時增加字母與字的間隙，演算法最複雜，適用於拉丁語系字母
文件涉及不少語言學名詞，我有看沒有懂，實測最準：
如以上展示，auto、inter-cluster、inter-word 會產生多餘空白，distribute、inter-ideograph、newspaper 較正常。最後我選擇用 distribute，用其他瀏覽器觀察也沒什麼問題，以此 Workaround 結案。