工作中的细节.一

可能是不涉及到算法的缘故，页面构建在大多数人看来比较简单。但是在工作一段时间后，也有了一些个人心得，这项工作虽然简单，但是有不少的细节。注意这些细节并把它们做好，可以提高他人的工作效率，或是避免特殊情况导致的错误，亦能改善用户体验。下面列举了几处工作中的案例。

1. a标签包含整个产品信息。

   

   常用做法给图片和文字各添加相同的链接，但如果手动更新则必须修改两个a标签中的href属性，工作时间增加了一倍。而使用a标签包含整个内容（图片和文字），只需要操作一次，提高他人的工作效率。
2. 字数不确定区域指定高度

   

   图片下方的产品介绍定义height和overflow为hidden，其利有二：产品介绍的文字后面的内容位置固定，和其它商品的此类信息保持在同一行（如价格都在同一行）；当内容字数过多，对高于指定高度的部分隐藏，避免页面错乱。
3. 预留适当的padding

   

   上图是页面发布IDC后出现的问题：设计稿中的产品名称只有一行，而后台数据中名称的长度可能会超过一行，和价格一栏挤在一起。所以构建页面时要思考各种极端情况，而这些情况可能是交互和设计没有考虑到的。
4. body设置word-wrap:break-word body设置word-wrap:break-word;可以避免单词长度大于父级元素长度时单词不换行的问题，另：FF 3.5+和chrome 4+均支持该属性，Opera不支持。而word-break:break-all;个人不提倡使用，因为词内换行会破坏用户的阅读习惯。

这些问题都是在工作中遇到过的，现在把它们列出来，也是为了避免以后再发生，自己要谨记。