一、遇到的問(wèn)題和學(xué)到的東西

這次娛樂(lè)首頁(yè)遇到了太多的問(wèn)題，試著回憶一下：

1、 最頭疼的是編碼問(wèn)題，新系統(tǒng)是 utf-8 編碼格式，引用之前 gbk 編碼的 css 和 js 文件時(shí)，容易出現(xiàn)各種問(wèn)題：

1）頁(yè)面中文亂碼；

2）若 js 包含亂碼的中文， ie6 會(huì)有莫名其妙的報(bào)錯(cuò)，一般是提示“缺少 } ”、“缺少 : ”、“缺少 ; ”之類的，而且通常是報(bào)錯(cuò)在 html 里面；

3）css 中的亂碼中文，不僅僅導(dǎo)致樣式錯(cuò)誤，有時(shí)候還會(huì)導(dǎo)致 js 報(bào)錯(cuò)。

避免亂碼要養(yǎng)成好習(xí)慣：

1）不管在什么地方引用 js ，都要設(shè)置 charset ，而不是跟隨 html 的編碼；

2）js 文件中最好不要有中文，若不可避免，要盡可能將中文進(jìn)行 unicode 轉(zhuǎn)義（附上傳送門(mén)：http://www.guabu.com/zhuanma/ ）；

3）顯式的設(shè)置頁(yè)面 charset ，不要讓瀏覽器自動(dòng)識(shí)別編碼，避免一些“傻傻分不清”的瀏覽器；

4）尤其需要注意的地方，是 js 文件里面動(dòng)態(tài)加載了其他 js ，若后者也是 gbk ，同樣需要設(shè)置 charset。

2、dom 及 css 規(guī)范的問(wèn)題。由于從事前端時(shí)間不長(zhǎng)，很多規(guī)范性知識(shí)積累不夠（我ciao，吐槽一下，如果不是為了兼容 ie6\7\8 和一些國(guó)產(chǎn)奇葩瀏覽器，也不會(huì)存在這個(gè)問(wèn)題，所以嚴(yán)格來(lái)說(shuō)是那些瀏覽器不按套路出牌，而不是我書(shū)寫(xiě)不夠規(guī)范，也可以說(shuō)是兼容性問(wèn)題）。問(wèn)題如下：

1）當(dāng) a 標(biāo)簽中嵌套塊級(jí)元素，且該塊級(jí)元素包含一個(gè) img 標(biāo)簽時(shí)，在 ie6\7 中，圖片的鏈接會(huì)失效；

2）向右浮動(dòng)塊級(jí)元素中的子元素，在 ie6\7 中，該子元素會(huì)被他前面的元素或文本擠掉下來(lái)，而不是完全脫離文檔流、頂?shù)阶钌戏剑?/p>

3）在設(shè)置 z-index 時(shí)候，ie6\7 中子元素的 z-index 受到父級(jí)元素的 position 限制，若不設(shè)置父級(jí)元素的 position: relative ，該子元素會(huì)被父元素的兄弟元素遮擋；

4）display: inline-block 的使用。之前一直覺(jué)得這是個(gè)很好的屬性，現(xiàn)在感覺(jué)還是少用，首先 ie6 支持的不夠完善，其次，dom 中被加了這個(gè)屬性的元素之間若有換行，會(huì)在頁(yè)面上顯示一個(gè)空格的距離，甚至瀏覽器不同，這個(gè)距離也會(huì)發(fā)生變化；

5）在給 a 標(biāo)簽制定 class 的時(shí)候，最好只寫(xiě)針對(duì)行內(nèi)元素的樣式，比如字體、顏色、左右 padding 、左右 margin 等等，若將 a 標(biāo)簽設(shè)置為了塊級(jí)元素，會(huì)導(dǎo)致 a 該 class 復(fù)用性降低；

為了更靠譜，針對(duì)上面問(wèn)題，需要注意一些地方：

1）行內(nèi)元素不要嵌套塊級(jí)元素，雖然 chrome 等瀏覽器是可以在 a 標(biāo)簽中放 div 的，但是為了兼容 ie 標(biāo)準(zhǔn)的瀏覽器，還是把 a 標(biāo)簽放到 div 里面比較靠譜，條件允許的時(shí)候可以將一個(gè) a 標(biāo)簽分成多個(gè)；

2）為了兼容 ie6\7 ，塊級(jí)元素內(nèi)向右浮動(dòng)的子元素要寫(xiě)到最前面，或者把其他元素向左浮動(dòng)；

3）z-index 在 ie6\7 中特別蛋疼，一定要記得給需要設(shè)置 z-index 元素的父元素們加上 position: relative ，必要時(shí)候還要加上 z-index ；

4）少用 inline-block ，菜單導(dǎo)航等橫向排列的列表，用 float 方式替代，但是需要注意 ie6 左右 margin 距離乘 2 的 bug；

5）a 標(biāo)簽的 class 不要涉及 a 的元素類型（或者干脆設(shè)置兩類 a 標(biāo)簽的 class ，一類是行內(nèi)元素的 class ，一類是 塊級(jí)元素的 class ，并加上前綴加以區(qū)分），而是給 a 標(biāo)簽的外層元素設(shè)置樣式。

還有另外一些需要注意的地方：

1）給頁(yè)面設(shè)置 meta ，讓 ipad 中保留左右側(cè)留白：

? ? ? ??<meta?name="viewport"?content="width=1024" />

2）為了讓那些雙核瀏覽器默認(rèn)以 webkit 模式瀏覽，可以在添加 meta：

? ? ? ??<meta name="renderer" content="webkit" />?

3）為了讓 ie 瀏覽器起用最高版本瀏覽網(wǎng)頁(yè)，添加 meta：

? ? ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge" />?

3、再總結(jié)一下小技巧啥的

1）回調(diào)函數(shù)是個(gè)好東西，在以后 coding 的時(shí)候，注意給回調(diào)函數(shù)留出位置；

2）行內(nèi)元素的上下 padding 雖然不會(huì)增加容器的高度，也不會(huì)撐開(kāi)外層容器，但是可以加高該行內(nèi)元素背景圖的可視范圍；

二、項(xiàng)目管理上獲得的經(jīng)驗(yàn)

三、流程上的經(jīng)驗(yàn)

更新中 ...

..... 好像 忘記這回事了 。。。擦了、。。