正常狀況下網頁中的 <sub><sup> 應該都是可以正確顯示為上標字及下標字. 不過偶而也會有不正常的時候, 例如: 痞客邦部落格的手機模式頁面, 預設的樣式不小心就把 <sub><sup> 的字高和其他所有的元素都設成一樣了, 所以就看不出上下標字了.

上下標字最基本的樣式設定是:

  • 把字型大小 (font-size) 縮小一些, 一般的字型大小下設成 65% ~ 70% 應該都是可以接受的.
  • 再來是文字的垂直位置 (vertical-align), 上標字應該用 "super", 下標字應該用 "sub".
  • 還有一個常常會被遺漏的, 行高 (line-height). 由於行中有上下標字時瀏覽器會動態的更動那一行的行高, 所以文章段落看起來就會有一組行距看起來和其他的不一樣. 要避免這一個狀況只要把上下標字的行高設成 0 就可以了.

下面這一段是我加在自己部落格的樣式檔中. (裡面的 !important 是為了要強制覆蓋掉痞客邦預設的設定)

.article-content-inner sub,   /* trick for same line-height as paragraph */
.article-content-inner sup  { font-size:70% !important; line-height: 0 !important; }

/* fix for mobile mode */
.zoom1.article-content-inner sub,
.zoom2.article-content-inner sub,
.zoom3.article-content-inner sub { vertical-align: sub !important; font-size:70% !important; line-height: 0 !important; }
.zoom1.article-content-inner sup,
.zoom2.article-content-inner sup,
.zoom3.article-content-inner sup { vertical-align: super !important; font-size:70% !important; line-height: 0 !important; }

如果你也用痞客邦部落格, 上面 2 行可以搬到 "自訂樣式" 中. 但是下面的 6 行必需每一篇有用到上下標字的都貼一次 (因為 "手機模式" 目前沒有自訂的 stylesheet). 或者你也可找個網路儲存空間, 把你的樣式檔放在那裡, 再把統一的樣式檔引入文章中

    MagicJackTing 發表在 痞客邦 留言(1) 人氣()