CSS 上下標小修改

剛剛發布那篇 “只買好公司” 的心得之後, 發現上下標還是沒起作用.這樣公式都會變得很難看懂.無奈只好動手修理,不然以後都只好貼圖了.

由於現代人已經不熱衷寫 HTML, 相關的訊息不好 Google. 根據我捕風捉影的結果, TinyMCE Editor 有乖乖做事, <sub><sup> 標籤都有加. 但是 HTML 被畫出來的時候, 上下標的字體沒變, 而且沒有正確地對齊. 所以看起來才會跟沒上下標的結果一樣.

幸好前人 [1] 有給提示, 只要把 CSS 裡面加上正確的描述就可以了. 但是怎麼做呢? 方法一就是換主題, 搞不好下一個主題就沒有這個 bug. 但我喜歡現在的主題, 它比較乾進清爽, 而且一時之間又不知道要換哪個好? 所以這招暫且不用.

第二個方法是主題不動, 但修改 CSS. CSS 的位置放在 wordpress\wp-content\themes\zbench (<- 這是我的主題) 下面, 或者從控制台進去也可以改 (外觀 -> 編輯 CSS). 但它會提示別亂改, 要改請改在 “附加的 CSS”. 所以我當然就 “先” 從善如流啦! 如果不 work, 就別怪我從惡如流氓了!

根據 editor-style.css 的語法, 前面是定義關鍵字, 後面是一個括號, 所以我把 [1] 裡面的東西抄一半過來. 首先把 font size 變小 70%. 然後把上標依據 super 做垂直對齊, sub 依據 sub(note) 做垂直對齊. 然後按發表就可以搞定了.

運氣不錯, 很快 debug 完問題! 當然還是要感謝前人的筆記. 所謂聞君一席話, 勝賭十年輸. 最近電視一直在廣告賭世足運彩可以賺大錢, 小心十年輸, 輸十年啊!

[Note]

  1. http://magicjackting.pixnet.net/blog/post/173686861-css:-%E4%B8%8A%E4%B8%8B%E6%A8%99%E5%AD%97-(%3Csub%3E,-%3Csup%3E)-%E7%9A%84%E7%9B%B8%E9%97%9C%E8%A8%AD%E5%AE%9A

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>