娱乐首页改版总结

一、遇到的问题和学到的东西

这次娱乐首页遇到了太多的问题，试着回忆一下：

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 中保留左右侧留白：

        

2）为了让那些双核浏览器默认以 webkit 模式浏览，可以在添加 meta：

         

3）为了让 ie 浏览器起用最高版本浏览网页，添加 meta：

         

3、再总结一下小技巧啥的

1）回调函数是个好东西，在以后 coding 的时候，注意给回调函数留出位置；

2）行内元素的上下 padding 虽然不会增加容器的高度，也不会撑开外层容器，但是可以加高该行内元素背景图的可视范围；

二、项目管理上获得的经验

三、流程上的经验

更新中 ...

..... 好像 忘记这回事了 。。。擦了、。。