老查理最近換了新工作，雖然換得心不甘情不願的，但工作就是工作，面臨到的挑戰還是要嘗試處理，對我來說，解決問題的快樂也真的是工作中的一大醍醐味…Anyway聊遠了，趕快進入正題：

新公司是家做教科書參考書的廠商，今天有個說大其實雞毛蒜皮，說小其實也挺讓我三條線的問題：一個給老師用的線上出考卷系統正在改版。因為是出版商，注重排版、並且以操作word為生命意義的編輯們要提供考題，全部都是word格式，題目會經由第一代開發商所提供的固定WORD表格，再經由某個神祕的轉檔程式存進題庫，經過老師挑選題目、配分，最後系統幫你組成個完整的試卷word檔；或是可在web考試的測驗頁面。

可能是內容產出必須迎合WORD或是HTML兩種可能需求之類的理由，第一代廠商在處理html時就是暴力的下了很多 inline style，像是數學式常見的上下標表現，10^-18這種的作法是這樣：

   10
  −
  18

可以看到font-size還是指定pt為單位，線上測驗的效能與體驗也很糟糕，感覺一整個重點就是為了組WORD試卷的產品。

然後因為疫情，線上測驗需求大幅增加，所以這個產品目前正在改版。改版的需求裡面有一條，希望網頁上的試題文字可以加大。但是，因為背後題庫系統還沒有改，編輯上題目流程還是那樣，要render到前台讓老師學生看到的題目，背後還是那一堆被下了一堆 inline style 的html code。CSS 的基礎大家都知道: inline 比 selector還大。

但是第二代廠商也不簡單，為了處理【字級放大】需求，他也做了 一個簡單暴力的動作

* {
  line-height: 1.5 !important;
  font-size: 19px !important;
}

然後所有的數字，不管是不是上標下標，通通是19px惹，超屌的。

更屌是最近正在進行功能驗收，回報這個問題時，廠商窗口的回覆是這樣的：【因取用1.0的試題html資料，樣式原本就設定到最底層，2.0為了強制放大所有試題的字級大小，才會用!important去強轉】….為了需求都不用顧其他影響的做法真的是太殺氣了了。

不過問題還是問題，晚上下班就稍微想了一下可行的解法，在盡量不改動基本條件下，觀察第一代廠商的HTML code ，放【上標】的地方很單純，就是用一個在inline指定好字形、字級、vertical-align位置的span來包。在HTML無法改變的狀況下，能拿來當selector的特徵只有style這個attribute

於是查了一下用attribute來做selector的作法 ，然後因為第二代廠商為了壓過inline調大字級採用!important，所以我們也必須上!impotant，並且selector要加上前兩層，取得至少與第二代廠商所下的CSS規則較高或至少相同的權重。這樣就能取得視覺上相對較為合理的呈現。

相關內容整理至codepen:  https://codepen.io/tvz292/pen/rNdeYwa