当程序员遇到像素：关于一个tab页CSS效果的调试

来源：互联网发布：如何零基础学算法编辑：程序博客网时间：2024/06/09 17:01

手头上的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"