49期项目感受——我的SmileMall_smile mall 付费-CSDN博客

本文链接：https://blog.csdn.net/lampzdrj/article/details/10600321

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写为<input type=”image” name=”submit” src=”text.jpg” />这个样子。因为这个无关页面样式的，所以在chrome下正常我就不管其他的了。

当前台功能基本完结时，我打算在IE下完整走一次前台流程。不试不要紧，这尼玛的IE！注册按钮是图片，死点无用；购买按钮是图片，点死无用；所有的所有的图片按钮都木有反应，难道我真要去茅山求道驱鬼符贴IE上不成。不过当天天色已晚，为了排除鬼神的影响，便将此问题扔到第二天解决。

第二天大早，阳光明媚，隐晦全无，是个查错的好天气。在缕缕光线的佑护下，直接把注册页面的$_POST var_dump出来，一下抓住了这只大虫。

原来，在IE下，如果在图片提交按钮中设置了了name，即<input type=”image” name=”submit” value=”submit” />