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

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

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

猜你喜欢