写CSS是很有趣的,因为这算是一种设计,如果这设计里有出彩的地方自己也会得意,不过有时候CSS是让人痛苦的。由于各种浏览器对网页的渲染标准不同,所以就会出现一个CSS表单在firefox里的效果很完美但到了IE那里就错位的一塌糊涂。这几天正在设计一个新的页面,却不巧又被CSS给弄得狼狈不堪,当然罪魁祸首还是IE。本来CSS的部分已经完成的差不多了,没想到最后还是在IE7中渲染时出现错位,折腾了老半天也没整明白问题出哪儿,我反复查看代码确定自己没有写错的地方,后来发现IE7解析html时有bug,li元素会“吃掉”与之相邻的同级div元素,真让人哭笑不得,并列的同级元素在IE7那里怎么解析成了隶属关系呢?有图为证:
这个postsBottom层虽然是空的但也不能就这么被同级的li元素吃掉啊,微软的程序员都干甚去了?以前光知道IE的怪癖特多,是web开发人员的噩梦,没想这回bug让我撞上了。据说IE8年底就要正式发布了,仅希望新版本更守规矩就好,还有IE6已经过时了,而且我也没有办法测试页面在IE6下的情况,新设计若在IE6下出问题我也爱莫能助了,谁叫IE家族都有怪癖呢?
另外,有些人包括我都喜欢在页面上添加一个额外的层,使之固定在浏览器的顶端或低端不随滚动条活动而移出视线,比如现在任何一个搜狐博客上都会看到这样一个固定的工具条。要做到这点有一个简单通行的做法,就是通过CSS在这个层上定义一个{position:fixed},很简单,但也存在问题,每当滚动这样的页面时浏览器会消耗更多的CPU资源,尤其是网页上还有不少图片时,那时你会发现页面上下滚动很不流畅,很卡,CPU占用可达100%,似乎那些设计页面的人从没有注意到这点。这样的页面一点也不会让人惬意,因此我一直没有在博客的页面上运用这个把戏。不过后来我倒是找到了一个不错的方法来解决这个问题,那就是通过js脚本控制div的自适高度来实现,在我即将完成的新设计中你就会看到。
在新的设计中整合了很多所谓web2.0的东西,比如twitter、豆瓣、音乐在线播放等。在线音乐播放方面本想整合StreamZo的资源,因为速度快、可外链,但现在这个网站无法访问,不知是否涉嫌侵权或是网站没有在当局备案的缘故,反正StreamZo一直不稳定。现在打算改用音乐八宝盒8box,这网站有人气,但不够灵活设计也很一般,不过好歹播放器是可外链的,而且比较方便,姑且用之。豆瓣还不错也会放在页面上,只是很自恋,话说回来,博客也很自恋,有时甚至让人生厌!不管怎样,姑且享受设计的过程和过后那微不足道的一点所谓自豪感。