一、遇到的问题和学到的东西
这次娱乐首页遇到了太多的问题，试着回忆一下：
1、 最头疼的是编码问题，新系统是 utf-8 编码格式，引用之前 gbk 编码的 css 和 js 文件时，容易出现各种问题：
1）页面中文乱码；
2）若 js 包含乱码的中文， ie6 会有莫名其妙的报错，一般是提示“缺少 } ”、“缺少 : ”、“缺少 ; ”之类的，而且通常是报错在 html 里面；
3）css 中的乱码中文，不仅仅导致样式错误，有时候还会导致 js 报错。
避免乱码要养成好习惯：
1）不管在什么地方引用 js ，都要设置 charset ，而不是跟随 html 的编码；
2）js 文件中最好不要有中文，若不可避免，要尽可能将中文进行 unicode 转义（附上传送门：http://www.guabu.com/zhuanma/ ）；
3）显式的设置页面 charset ，不要让浏览器自动识别编码，避免一些“傻傻分不清”的浏览器；
4）尤其需要注意的地方，是 js 文件里面动态加载了其他 js ，若后者也是 gbk ，同样需要设置 charset。
2、dom 及 css 规范的问题。由于从事前端时间不长，很多规范性知识积累不够（我ciao，吐槽一下，如果不是为了兼容 ie6\7\8 和一些国产奇葩浏览器，也不会存在这个问题，所以严格来说是那些浏览器不按套路出牌，而不是我书写不够规范，也可以说是兼容性问题）。问题如下：
1）当 a 标签中嵌套块级元素，且该块级元素包含一个 img 标签时，在 ie6\7 中，图片的链接会失效；
2）向右浮动块级元素中的子元素，在 ie6\7 中，该子元素会被他前面的元素或文本挤掉下来，而不是完全脱离文档流、顶到最上方；
3）在设置 z-index 时候，ie6\7 中子元素的 z-index 受到父级元素的 position 限制，若不设置父级元素的 position: relative ，该子元素会被父元素的兄弟元素遮挡；
4）display: inline-block 的使用。之前一直觉得这是个很好的属性，现在感觉还是少用，首先 ie6 支持的不够完善，其次，dom 中被加了这个属性的元素之间若有换行，会在页面上显示一个空格的距离，甚至浏览器不同，这个距离也会发生变化；
5）在给 a 标签制定 class 的时候，最好只写针对行内元素的样式，比如字体、颜色、左右 padding 、左右 margin 等等，若将 a 标签设置为了块级元素，会导致 a 该 class 复用性降低；
为了更靠谱，针对上面问题，需要注意一些地方：
1）行内元素不要嵌套块级元素，虽然 chrome 等浏览器是可以在 a 标签中放 div 的，但是为了兼容 ie 标准的浏览器，还是把 a 标签放到 div 里面比较靠谱，条件允许的时候可以将一个 a 标签分成多个；
2）为了兼容 ie6\7 ，块级元素内向右浮动的子元素要写到最前面，或者把其他元素向左浮动；
3）z-index 在 ie6\7 中特别蛋疼，一定要记得给需要设置 z-index 元素的父元素们加上 position: relative ，必要时候还要加上 z-index ；
4）少用 inline-block ，菜单导航等横向排列的列表，用 float 方式替代，但是需要注意 ie6 左右 margin 距离乘 2 的 bug；
5）a 标签的 class 不要涉及 a 的元素类型（或者干脆设置两类 a 标签的 class ，一类是行内元素的 class ，一类是 块级元素的 class ，并加上前缀加以区分），而是给 a 标签的外层元素设置样式。
还有另外一些需要注意的地方：
1）给页面设置 meta ，让 ipad 中保留左右侧留白：
<meta name="viewport" content="width=1024" />
2）为了让那些双核浏览器默认以 webkit 模式浏览，可以在添加 meta：
<meta name="renderer" content="webkit" />
3）为了让 ie 浏览器起用最高版本浏览网页，添加 meta：
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
3、再总结一下小技巧啥的
1）回调函数是个好东西，在以后 coding 的时候，注意给回调函数留出位置；
2）行内元素的上下 padding 虽然不会增加容器的高度，也不会撑开外层容器，但是可以加高该行内元素背景图的可视范围；
二、项目管理上获得的经验
三、流程上的经验
更新中 ...
..... 好像 忘记这回事了 。。。擦了、。。
网友评论