站点改进心得

网站宣布完成，进入后期的加工、修饰和完善阶段。考虑到近期要休婚假，所以工作积压在了国庆前后，加之近期领导要求的修改又多，简直忙疯了……很想像猫一样晒着太阳大睡，即使国庆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实现兼容性，我选择的是最后这种方法。

代码如下：

 <link href="../style-firefox.css" rel="stylesheet" type="text/css" />

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_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天上班的工作安排和状态调整的心得。诸如，周一、周二是周末休息后的工作状态调整期，开始安排和逐渐进入连续作战状态，周三是缓冲期，安排妥当准备就绪，调整好身体状态，周四周五就要做拼命三郎了，将计划和安排一气呵成圆满结束本周的短期计划，就算非常疲累也没关系，周末就可以好好休息了……就是因为这周一开始就拼命了，今天才周二已没有了后劲……

吸取经验教训，今天不加班～

墨神的凡龛

站点改进心得

Comments