2010-01
27

挽救杯具

By xrspook @ 20:35:55 归类于: 烂日记

昨天,知道了原来我们粮库也有网站,迫不及待地去观摩一下。汗!我用的是FF,结果呢?中国人做的网页就是对IE以外的浏览器水土不服,于是,汗,再汗……

网页是个需要测试测试再测试的东西,内容当然很重要,但如果不同用户不同浏览器出来的效果不一样呢?杯具……在中国人设计的网页中,非IE不可是习惯性真理性的,比如说大名鼎鼎的备案网站,又比如同样如雷贯耳的网上支付网站,巨汗!地球人都知道IE的安全性不好,速度不优秀,但,勤劳勇敢机智过人的中国人就喜欢用系统自带原汁原味,甚至还没经过升级到7或8的IE,果然是微软的忠实粉丝啊!

但,我们某些人的思维是发散的,面向的是世界各地的盆友。在外国盆友设计的网页中,基本上FF横行,是推荐用浏览器,比如说我用的WP模板的作者。显然,他老人家视IE为无物。请看下图:


这是IE的截图。


这是FF的截图。

左图是我千辛万苦经过修改后的IE适应版,右边是原版。杯吧,原版在IE下,3栏的设计都变成2栏了,2个侧栏“被迫”挤到了一块,肯定是和背景不搭调的,揪心啊!

为了挽救这恐怖的杯,我首先请来了Firebug大人。


模板,显然,是div的,样式肯定是CSS的,而问题就发生在content-body、content-sidebar-2和content-sidebar里。首先,我在content-sidebar的CSS里加了一句“float:right;”,解决了content-sidebar在IE里跟在content-sidebar-2屁股后面的问题,实现右置。但为什么升不上去呢?难道因为太窄?我尝试修改过很多宽度都不行,看来不是位置不够的问题。会不会是content-sidebar里有“clear”的命令呢?应该不会。如果有的话,在FF就不会正常了。中间部分三栏设计,我们可以用3个float来解决问题,于是我试探性地在content-sidebar-2里加一句“float:right;”惨了,占到了最右方,当然,因为它的层在content-sidebar之前,理所应当占最右边。那如果改为“float:left;”呢?我的设想是它或许会正常,如果content-body已经设定为“float:left;”的话,怪异的是,在IE下正常,在FF下content-sidebar-2抢到了正文的左边。问问Firebug,虫子说content-body里有个“float:none;”的设置。怎么可能,我已经把CSS文件里所有content-body都加上“float:left;”,怎么有可能还是“float:none;”!!!!但如果不存在,Firebug不可能爬虫出来,到底在哪里呢?无计可施之下,找起了网页源文件,居然,居然被我在网页头部找到这等东西!!!


实在太杯具,灰常杯具啊!文件头,居然放在文件头,无语了。在WP的header里找,没找到,最后终于在function里找着,我的老天,该死的“none”!于是,终于用3句float解决了IE怪异的效果,让中国人看到的效果和外国人相似。

哎,如果大家用订阅的话,版面什么个鬼样又有什么关系呢。

2008-06
24

在犯错中进步

By xrspook @ 17:47:16 归类于: 烂日记

围绕令人晕倒的Light Blue中以500为浏览器宽度测试的问题,几位网友在我的天写了几条言辞比较激烈的评论。今天有位朋友提出我的天在1920*1200的状态下浏览很有问题,我虚心接受!因为这blog现在所用的模板原始版本是在2006年头形成,当时主流显示器还只是正屏的15寸和17寸,我设计所用的显示器就是15寸的,因此里面的布局完全按照分辨率1024*768来分配。在2年间,显示器好像吹气球一般在无限变大,很多人使用宽屏,大家的显示器更新为19寸、20寸、22寸、24寸、26寸、30寸……我昨天也买了个最大分辨率为1440*900的三星943NW,但现在用的还是最大分辨率为1280*1024的acer AT706,常用的分辨率是1152*864。所以,我连1920*1200状态下,网页是个什么状态都没见过。不过我能猜想大概是个什么模样。

之前我body中background-img并没有控制为no-repeat,而我原本使用的背景大小为1024*768,当分辨率大于该分辨率时,网页就会在X和Y重轴方向复图像来填充。在1920*1200分辨率下,1024*768的图像就只占屏幕的1/3(纯面积计算)左右,那种花斑的效果可想而知。通过Opera的缩放功能模拟了一下用25寸以上显示器看我的天的效果,大概如右图。嘻嘻,挺梦幻的嘛。屏幕正中央部分的浏览效果不受影响,其它部分十分不敢恭维。

知道这个bug后,我马上在blog的末端处加入“Best Viewed with Firefox / Opera / IE @ 1024 X 768”,加入这句不能解决问题,只算做个主动承认。 

整个下午都在挣扎该如何解决这个大分辨率的bug。开始的思路是加入个层,然后把层固定在背景之上,依靠层内滚动实现网页浏览,不过该方法与blog内的某些设置相冲突,不得不放弃。最后决定在背景图片上做文章。1920*1200最大的挑战是高度问题,若使用高度为768的图片,Y轴上不重复,长条的网页就免不了要凸出图片之外。也就是说,只能扩大图片高度,达到1200。经过多次尝试,最终敲定采用现行的背景。请看下面的截图:左图是1152*864,右图是模拟1920*1200。

   

单凭我个人力量,很难发现自己存在的所有问题。“众人拾柴火焰高”,希望各位发现问题的朋友踊跃发言,好让我有机会去改进,不尽感激!

2008-06
22

令人晕倒的Light Blue

By xrspook @ 21:57:26 归类于: 烂日记

昨天发现BlogBus推出了款新的系统模板,名字叫做“Light Blue”是Keeno的作品。第一时间就去看了,感觉是“狂晕”。它默认的字体是“Microsoft Yahei,华文细黑,宋体”。我的系统是XP,虽然有装IE7,但没有微软雅黑,于是模板的效果就变得非常不敢恭维!到底我看到的文字是个什么鬼样,请大家看图:

试问哪一个人看到这样的文字不会头晕。

一改BlogBus模板的“固定宽度”,这个Light Blue模板是“自适应宽度”的,但却弄出些大笑话。比如在浏览器宽度为500的时候,就会出现下图的现象:

可以说是一团糟,东西都挤到了一起。用500的宽度去测试,是不是我太苛刻呢?现在人们都用宽屏了,浏览器通常是以最大化方式打开的,但我们不能否认,还有使用15寸显示器的朋友,还有显示器的分辨率为800*600,还有人使用IE6为默认浏览器,而且新建方式为窗口。

真正合格的模板应该经得起考验。适用于任何浏览器,任何分辨率显示器。写blog很多时候不只是我们自己看,我们不能只从我们自己的角度去测试模板。现在WordPress的blog模板都几乎从两栏向三栏过渡了,但BlogBus却仍是以两栏为设计核心,甚至推出如此经不起考验的系统模板。作为她的忠实用户,虽然不经常使用她的系统模板,但我还是要问一句,她在糊弄我们么?BlogBus的系统模板有118款,可以说从网页美工到审批人员都应该有不少经验了,怎么可以让少半截的系统模板通过审批推出市场呢?这算不算当事人不作为?

一直都在关注BlogBus的系统模板,因为自己也在跟随美工们的设计学习改进。Light Blue这款模板真的让我有“辛辛苦苦几十年,一夜回到解放前”的感触。哎~~~ 同志们,“逆水行舟不进则退”啊!

2008-04
4

万恶!!!

By xrspook @ 23:59:47 归类于: 烂日记

当你看到本日志时,我已经对我的天进行了模板转换!

作修改模板的最后冲刺,把测试网页的代码粘到我的天,却发现怎么刷新都不对头。简直可以说是吓死人!效果如下图:

惊恐!

Firebug一检查,其CSS显示为“There are no rules in this stylesheet.”果然不出我所料!http://xrspook.blogbus.com的CSS打不开!BlogBus的旧模板系统中的CSS样式表是直接使用,而新模板系统的样式表是引用使用!就拿我的天来说,BlogBus分配给它的样式表地址是193738.css,但从地址栏打开会出现503的错误代码,即

Service Temporarily Unavailable

The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

所以,网页显示一团糟……DHTML+CSS的网页没了CSS能不变形吗?!

天啊!在这个关键时候和我开玩笑,除了说万恶,还能说什么:(

© 2004 - 2024 我的天 | Theme by xrspook | Power by WordPress