PJBlog:制皮肤作时如何隐藏#blogname

pop:在做皮肤(SKIN)时,因为基本上都在图片上搞定博客名称等,所以需要隐藏#blogname。

这个效果有两种方法可以实现:

打开皮肤文件夹下的layout.css文件,在 /*---顶部样式---*/ 这里修改相对应的东西。

  一、设置display:none
    这种方法可以直接隐藏,但经过测试后发现,在IE、FireFox和Opera下有不同的结果,对于设置#menu很不方便,于是这种方法不推荐;

  二、把字体设置为与背景色相同的颜色
    这种方法非常好,并且title可以被搜索引擎收录。我在制作新皮时,由于背景使用了渐变,因此只能把字体设置为1px。可是在opera下却出现了不同的效果,1px的字体被opera改变成了10px,并且导致#menu的定位在FireFox和opera下不同。

  为这个问题烦恼了很久,终于想出了解决的办法,将#blogname设置高度为1px,FireFox和opera下的问题解决了,可是IE下又有了问题。虽然字体大小为1px,可是IE却将字体撑高了。这个倒好办,再加个参数:overflow:hidden,终于问题解决了。

  在我们制作皮肤时,尽量想到一个中和的办法,避免使用 !important,即使是 !important有时在不同的浏览器下还是会有所不同的。以前制作的几个皮肤,在Windows下用不同的浏览器都没问题,可切换到Linux下后却出现错位。

下面分享一下我的解决办法供大家参考,代码如下:

#container #header #blogname{height:1px;font-size:1px;color:#630506;overflow:hidden}
#container #header #blogname #blogTitle{}

Related Posts