分类： IT职场
2012-08-29 09:50:28
SmileMall，我的商城项目名称。本来是想叫Small，取麻雀虽小的意思，但太过小气，遂改S为Smile，小名仍旧Small。
Small的制作始于国浩老师的提醒，他说提前把模板做好，项目开始后会很轻松。前人的经验很是宝贵，现在的我对此深信不疑，于是开始干活。那应该是项目正式开始的一周前吧。
素材的收集得感谢ECSHOP和懒人图库，让我仅做了一个纯色按钮和两枚文字LOGO就搞定了商城的全部素材。之后的流程蛮顺利，两个晚上的空闲时间搞定首页，分割出头部、导航、尾部后，其他页面顺水推舟。此处省略流水帐千字余，仅一事需提起，且称作float君与absolute君在IE国的纠葛吧。
我习惯用chrome，本本是WIN7+IE9，当页面基本完成之时，闲逛D盘时发现IEtester躲在角落，遂将其拎出，扔入所有页面。运气不错，IEtester里的IE6-IE9显示基本正确，大喜过望之时总觉得哪里不对却又找不出，于是深呼吸，定睛再看，尼玛，我的导航按钮呢，咋就一个背景图片孤零零地守候，IE6/7/8，你们把我的按钮小弟们藏哪去了？此处省去喷字万余……
在chrome和FF下，出了问题还有devtool能寻到蛛丝马迹，那个坑爹的iedev根本没法用，你叫我到哪找小弟们。消失的按钮小弟被我装在一个 absolute的盒子里，背景图则在另一个平级的float盒子里，IE9/FF/chrome都好好的，偏偏在就IE6/7/8里玩起了躲猫猫，躲猫猫要命啊，我心甚急，心急乱投医，便在CSS里乱改一气。用其他的样式虽然能出来，但不能达到我要的效果，无意间瞥见我放在头部和导航条之间的 clear:both，信手拈来，刷新之！居然小弟们就乖乖地出现了，嘿嘿，得来全不费工夫。
总结如下：若两平级盒子，一盒子绝对定位，另一盒子浮动，则浮动盒子会被遮挡，处理办法就是中间加上一清除浮动层。
呃，蛋疼了，此时，就是写项目感悟的此时，突然发现IE没错啊，浮动层就是该浮上去呀，看来我是对IE预设立场了，唉，抱歉IE。但这也就是说，我上面的白写了，亏我还把这条记入TIPS了，算了，这么多字，实在不忍删去，留着吧。
接下来说下Hn标签，我在做模板的时候，就在想，这个H标签怎么放才好呢。
老大难的H1该往哪里放，隐藏掉还是加LOGO图片上或者干脆不用？最终决定将H1置于LOGO图片处，认真地在IMG中写上了TITLE与ALT属性。
H2被我放在导航栏的某个主推栏目上；
H3放哪里？从左至右的思路影响我太深，在main区域，代码从上到下，显示从左到右，左边左浮动，右边右浮动。但左边是些杂七杂八的东西，右边才是页面的主要内容，首页橱窗位。猛然想起桐正老师的良方，先写右边，右边右浮动，左边就扔左边，浮动都不用。
这样H3顺理成章地放在每行橱窗的标题上，三行橱窗三个H3，刚好。这样H1/2/3都在页面代码靠前位置且都放在主推内容上，不知效果会如何，自我感觉蛮好，毕竟格式正确啊。
接着再说一个IE的事，我记得在手册里看到，input type设为image时，这个input便成为提交按钮，传值为图片的长与宽的像素值，即x=imageX&y=imageY。
于是我按照标准格式将所有的图片按钮html写为这个样子。因为这个无关页面样式的，所以在chrome下正常我就不管其他的了。
当前台功能基本完结时，我打算在IE下完整走一次前台流程。不试不要紧，这尼玛的IE！注册按钮是图片，死点无用；购买按钮是图片，点死无用；所有的所有的图片按钮都木有反应，难道我真要去茅山求道驱鬼符贴IE上不成。不过当天天色已晚，为了排除鬼神的影响，便将此问题扔到第二天解决。
第二天大早，阳光明媚，隐晦全无，是个查错的好天气。在缕缕光线的佑护下，直接把注册页面的$_POST var_dump出来，一下抓住了这只大虫。
原来，在IE下，如果在图片提交按钮中设置了了name，即
IE下的表单传值会变为submit-x=imageX&submit-y=imageY，imageX、imageY为图片长宽像素值，下同；而非IE中为submit=submit&x=imageX&y=imageY。
于是，if(isset($_POST[‘x’]))下IE下判断失败，无法获取传值。解决方法很简单，删掉name属性即可。这样，无论是IE还是非 IE，传递的值均为x=imageX&y=imageY这两个值，即直接写为，省时省事。
印象深刻的就是上面这两个问题了，都是兼容问题，第一个是我预设立场，错怪IE了，第二个怎么说呢，反正我是记住了。
程序上基本没什么问题，跟着桐正老师，一路顺风顺水。毕竟网络购物这么多年，还有神器ECSHOP做参考，商城的各项流程都比较清楚，唯一的麻烦可能就是经常被自己的一个八参数读库函数搞晕吧，不过它也替我省事不少。
在项目期第一周的周末吧，我记得好像是，前后台基本完工。
翻看着Small的代码，竟然有些陌生。一遍遍重复着前后台的流程，居然有些恍惚。虽然功能不多，虽然界面单调，虽然占用资源，虽然隐藏着太多的bug…
但这个小家伙，他就在那里，他的诞生，已让我收获太多…
原文地址：
