站点改进心得

网站宣布完成,进入后期的加工、修饰和完善阶段。考虑到近期要休婚假,所以工作积压在了国庆前后,加之近期领导要求的修改又多,简直忙疯了……很想像猫一样晒着太阳大睡,即使国庆7天刚刚过完。

小有成就的是解决了一些显示效果相关的技术问题,也就是css、js在不同浏览器、显示器显示效果的兼容性。

1.css在不同浏览器下显示效果不同

firefox和IE对某些css样式的认定有不少区别,包括:

  • ul和ol的默认padding值是不一样的,在Firefox中,padding-left默认值为40px左右,而IE中为0,只能将它们指定为20px才保证在两个浏览器中显示效果一样;
  • 对字体大小small的定义不同,Firefox中为13px,而IE中为16px,差别挺大,也只能设置为14px了事;;
  • 并列排列的多个元素(图片或者链接)的div和div之间,代码中的空格和回车在firefox中都会被忽略,而IE中却默认显示为空格(约3px);
  • 对不规范代码的兼容情况不同,IE中漏掉的关闭符号对显示不造成影响,而firefox中就会形成错乱的布局,而在ie中用到的padding和margin的负值都会被firefox解析为0,易造成布局的混乱;
  • firefox对于长高尺寸的严格解析会造成与设置不匹配(超出)的图片或表格将原设置div撑大;
  • !important属性可以在除IE浏览器的其他浏览器中起作用,因此有人利用这种差别来令一个CSS兼容多种浏览器;
  • 未定义id的div,在IE中会与div属性中的其他设置有关,而在firefox中的位置会于div在文件中位置有关,紧随前一个div出现……


解决这种问题可以通过规范css代码,使其符合两种规范的标准样式,也可以在差别处利用!important对firefox设置属性,或者针对多种浏览器分别各自配置合适的CSS文件,再通过判断浏览器选择不同CSS实现兼容性,我选择的是最后这种方法。


代码如下:
<!--[if IE]> <link href="../style-ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if !IE]>--> <link href="../style-firefox.css" rel="stylesheet" type="text/css" /><!--<![endif]-->

2.显示器尺寸的适应问题

最初设计时,根据在某网站作的统计,使用800×600的显示器的用户数比例很少,可是随数据量的增大,这部分用户已达到6.5%左右,不得不计入考虑。除首页CSS布局限制较为固定之外,其他所有页面的都使用%定义div宽度,则可以根据显示器分辨率自适应调节,以不影响显示效果,需要解决的问题主要是首页。

首页设计中,曾经考虑过这个问题,因此在左边的800×600分辨率可显示的区域是站点内容的主体,右边是新闻列表和一些宣传浮动图标的预留区,因此只要在用户浏览时令横向滚动条消失自然就可以了。

许多网络上的经验都是在body中设置overflow-x属性为hidden来实现
body { overflow-x : hidden ; }
不过我用此方法测试多次都无效,后来才在charles大侠blog中发现原因:

但是如果页面引用了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 的话(在页面第一行)以上代码无效。

有人将上面这句dtd的代码删去可以解决,但是就不符w3c标准了,charles大侠的解决办法似乎太复杂了。本人经测试发现其实关键就是将overflow-x:hidden附加到html属性中,即在css文件中加入
html { overflow-x : hidden ; } 语句就可以了。哈哈。

对于此类网络应用的小技巧,蓝鸟也收集了不少


3.动态top按钮对本人制作的CSS和DIV的不兼容

利用js文件制作的top按钮,一种经典的显示效果,即按钮可以随着屏幕的滚动在屏幕上滑动(速率变化),始终保持在合适的部位。可是曾经用在html文件中没有问题在本人的css+div布局中就屡屡报错,不是显示部位不对,就是被别的层遮挡住,或者没有那种自上而下随屏幕滚动平滑下移的效果。经笑笑帮忙测试,在其他的html和div布局中都能显示正常,因此可能与本人css属性中过多使用z-index属性有关。最终问题也没有解决,只是中和成令一种固定位置的top按钮。两种方案分享如下。

滑动的top按钮(鼠标移动上去可以变换图片)
<SCRIPT language=JavaScript>
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</SCRIPT>
<DIV id="divMenu">
<A onMouseOver="MM_swapImage('Image18','','http://www.thinkjam.org/images/newjam/logo.jpg',1)" onmouseout=MM_swapImgRestore() href="#"><IMG height=56 src="http://www.thinkjam.org/images/newjam/logo.jpg" width=76 border=0 name=Image18 oSrc="http://www.thinkjam.org/mercury/images/mc-logo.gif"></A></DIV>


<SCRIPT language=javascript>
<!--// 漂浮的topJS

var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";

function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}

function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;

if (isNS4) {
yMenuFrom = divMenu.top;
yMenuTo = windows.pageYOffset + 405; // 困率 困摹
} else if (isDOM) {
yMenuFrom = parseInt (divMenu.style.top, 10);
yMenuTo = (isNS ? window.pageYOffset : document.body.scrollTop) + 405; // 困率 困摹
}
timeoutNextCheck = 500;

if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);
if (yMenuTo < yMenuFrom)
yOffset = -yOffset;
if (isNS4)
divMenu.top += yOffset;
else if (isDOM)
divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ("moveRightEdge()", timeoutNextCheck);
}

if (isNS4) {
var divMenu = document["divMenu"];
divMenu.top = top.pageYOffset + 0;
divMenu.visibility = "visible";
moveRightEdge();
} else if (isDOM) {
var divMenu = getRef('divMenu');
divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + 0;
divMenu.style.visibility = "visible";
moveRightEdge();
}
//-->
</SCRIPT>

固定的top按钮(似乎应该是固定在屏幕的某个位置,只是于我的css不兼容)
<DIV style="z-index:6; FILTER: progid:DXImageTransform.Microsoftpadding:8px; LEFT: expression(eval
(document.body.scrollLeft)+eval(document.body.clientWidth)-150); POSITION: absolute; TOP: expression(eval
(document.body.scrollTop)+eval(document.body.clientHeight)-100); TEXT-ALIGN: center"><A href="#" ><IMG src="http://www.thinkjam.org/images/newjam/logo.jpg" width=76 height=56 border=0 /></A></DIV>


4.某些js导航菜单对forefox兼容性不好

本来用jsmenu做了一个导航菜单,是移动到一级栏目横向显示此目录下分类的效果,但是在firefox中显示后就无法隐藏了,最后多个层叠加在一起很混乱。js与firefox之间的兼容性问题主要有以下一些(摘自站长吧的《JS的IE和Firefox兼容性汇编》):

1. document.form.item 问题 2. 集合类对象问题 3. window.event 4. HTML 对象的 id 作为对象名的问题 5. 用idName字符串取得对象的问题 6. 变量名与某 HTML 对象 id 相同的问题 7. event.x 与 event.y 问题 8. 关于frame 9. 在mf中,自己定义的属性必须getAttribute()取得 10.在mf中没有 parentElement parement.children 而用 11.const 问题 12. body 对象 13. url encoding 14. nodeName 和 tagName 问题 15. 元素属性 16. document.getElementsByName() 和 document.all[name] 的问题

由于对JS不够熟悉,只能转而寻求其他方法。后来使用了css和div联合控制的菜单,效果很好,尤其是提出将导航菜单做到程序中调用,可以显示出“where are you"的效果。如今网页头部和菜单已全部抽出,令人欣喜的是在新增了top按钮的情况下耽搁页面的文件一般在5、6k上下(除个别含多个表格的页面),与CSS改版前的25k左右,和导航抽取前的12k左右相比又减少了许多。同事用.net通过传参调用就改进了导航菜单,还将其抽取到一个文件中,较之DW的模板更新又大大进了一步,会编程真了不起。

最近为这些问题忙得头晕脑涨,总觉得明天就是周末了,据此也总结出每周5天上班的工作安排和状态调整的心得。诸如,周一、周二是周末休息后的工作状态调整期,开始安排和逐渐进入连续作战状态,周三是缓冲期,安排妥当准备就绪,调整好身体状态,周四周五就要做拼命三郎了,将计划和安排一气呵成圆满结束本周的短期计划,就算非常疲累也没关系,周末就可以好好休息了……就是因为这周一开始就拼命了,今天才周二已没有了后劲……

吸取经验教训,今天不加班~