當程式設計師遇到畫素：關於一個tab頁CSS效果的除錯
阿新 • • 發佈：2019-01-09
手頭上的jsp應用要做一個tab頁形式的選單，作為不喜歡畫圖的程式設計師，我copy了另一個系統的檔案
。下面是html檔案顯示出來的原始效果
是用css做了圖片分割，tab所用的圖片僅有一個而已：
tabs_bg.gif
要做成動態的，就不免要把html檔案 轉成 jsp檔案。轉換之後卻變了大摸樣
對比兩邊的html內容的不同，發現我在jsp裡面加上了這樣一句，這是在html檔案裡面沒有的：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
去掉以後，就恢復正常了，不過……
和原始的效果有一點點不同，確切的講，是每個tab的中間向下塌陷了1個畫素。雖然只是1個畫素的區別，但是看起來就很難受了。
jsp輸出的內容和原始html的內容完全一致啊，為什麼顯示的效果怎麼還有差異？
終於發現了，是UTF-8編碼在作怪，無論是jsp還是html檔案，只要存為了UTF-8格式，就會中間塌陷下來。
但是系統已經限定了，必須用UTF-8格式。看來這1個畫素的問題，已是必須解決不可，而且還是要從CSS上著手。
為了便於處理，我把 tabs_bg.gif 分拆成了上中下三個高24px的圖片。然後微調了中間塊的高度，從24px調整為25px。終於
其實仔細看的話，還是有一點瑕疵：圖片有白邊。
這個，我想，就不是做為程式設計師的我需要做的事情了，要找美工啦！
附原始效果的css程式碼
.tabsLeft{ width:8px; height:24px; cursor:pointer; background:url("../images/tabs_bg.gif") no-repeat left center; } .tabsCenter{ height:24px; color:#FFFFFF; font-family:宋體; font-size:12px; white-space:nowrap; cursor:pointer; background:url("../images/tabs_bg.gif") no-repeat center center; padding:6 4 0 4; } .tabsRight{ width:8px; height:24px; cursor:pointer; background:url("../images/tabs_bg.gif") no-repeat right center; } .tabsHoverLeft{ width:8px; height:24px; cursor:pointer; background:url("../images/tabs_bg.gif") no-repeat left bottom; } .tabsHoverCenter{ height:24px; color:#FFFFFF; cursor:pointer; font-size:12px; font-family:宋體; white-space:nowrap; background:url("../images/tabs_bg.gif") no-repeat center bottom; padding:6 4 0 4; } .tabsHoverRight{ width:8px; height:24px; cursor:pointer; background:url("../images/tabs_bg.gif") no-repeat right bottom; } .tabsSelectLeft{ width:8px; height:24px; cursor:pointer; background:url("../images/tabs_bg.gif") no-repeat left top; } .tabsSelectCenter{ height:24px; color:#0057B8; cursor:pointer; font-size:12px; font-family:宋體; white-space:nowrap; background:url("../images/tabs_bg.gif") no-repeat center top; padding:6 4 0 4; } .tabsSelectRight{ width:8px; height:24px; cursor:pointer; background:url("../images/tabs_bg.gif") no-repeat right top; }
最終版的css，除了換圖片檔案外，還把圖片的縱向選取位置都設為了 "top"