Web 前端開發細微常識

一。如何觸發 IE6/7 的 hasLayout

經常看到一些流行的 hack 中有 height: 1%;或者 zoom: 1;這樣的東西，不加還不行，其實這是用來觸發 IE6/7 的 hasLayout 屬性的：

height: 1%;IE6 下會解析為 min-height，但不適用於 IE7，zoom: 1;可以觸發 IE7 的 hasLayout

在瀏覽器兼容的 hack 中用得很多，比如用來解決盒子坍塌問題的.clearfix 就用了 height: 1%;

P.S. 關於盒子坍塌問題的更多信息請查看 [黯羽輕揚：CSS 盒子坍塌問題的 4 種解決方案](http://ayqy.net/blog/CSS 盒子坍塌問題的 4 種解決方案/)

二。針對 IE 的 CSS Hack

IE 條件註釋

缺點：需要同時維護多個文件中的同一樣式，可維護性差

選擇符前綴法

*html 前綴只對 IE6 有效，*+html 前綴只對 IE7 有效，例如：

    .test {
        /* IE6/7/8... */
    }

    *html .test{
        /* IE6 */
    }

    *+html .test{
        /* IE7 */
    }

缺點：向後兼容存在風險，IE8/9/10 也可能識別*html 和*+html 前綴，而且不能用於內聯樣式

樣式屬性前綴法

_只對 IE6 有效，*對 IE6/7 都有效，例如：

    .test {
        color: red;   /* IE6/7/8... */
        *color: red;  /* IE6/7 */
        _color: red;  /* IE6 */
    }

缺點：向後兼容也存在風險，但可以用於內聯樣式

推薦做法是使用 IE 支持的條件註釋，但實際應用中應該根據項目規模等因素採用合適的方式

三。margin 的特例

相鄰的 margin-top 和 margin-bottom 會重合，而 margin-left 和 margin-right 卻不會，所以不要混合使用，項目初期就應該約定好只用哪一個

四。樣式覆蓋規則的特例

樣式有特殊性，或者說是權重，特殊性相同的樣式規則後聲明的會覆蓋掉先聲明的

注意是聲明順序，而不是元素 class 屬性值字符串中的先後順序，例如：

.myStyle1 {
    color: red;
}
.myStyle2 {
    color: green;
}

<p class="myStyle1 myStyle2">綠色的</p>
<p class="myStyle2 myStyle1">也是綠色的</p>

class 屬性值字符串中樣式名的先後次序對樣式覆蓋規則沒有影響

P.S. 至於特殊性是什麼，具體計算規則是什麼，請查看 [黯羽輕揚：](http://ayqy.net/blog/CSS 選擇器分類總結/)

五。DOM 操作的優化技巧

最基本的技巧是緩存 DOM 節點對象，避免頻繁 DOM 查找的開銷，此外還有優化 DOM 查找的小技巧：

先用 byId 縮小查找範圍，再用 byTagName 獲取元素，例如：

var p = document.getElementById("p");
// alert(p.getElementById("innerP").innerHTML); // Uncaught TypeError: Object #<HTMLDivElement> has no method 'getElementById' 
alert(p.getElementsByTagName("p")[0].innerHTML);

注意上面代碼註釋部分，任意元素都有 getElementsByTagName 方法，但只有 document 元素有 getElementById 方法

P.S. 關於 DOM 優化的更多技巧，請查看 [黯羽輕揚：JS 學習筆記 12_優化](http://ayqy.net/blog/JS 學習筆記 12_優化/)

六。IE6 的 PNG 透明

IE6 下 PNG 圖片的透明部分顯示為粉紅色（淡藍色？），可以用 IE 濾鏡修復：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="圖片路徑", sizingMethod="crop");

例如：

.img{
    background: url(icon.png);
    width: 32px;
    height: 32px;
}
/* IE6 hack */
*html .img {
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icon.png", sizingMethod="crop");
}

使用這個濾鏡後在 IE6 下透明像素就顯示正常了，關於 IE6 和 PNG 透明的更多解決方案請查看 [張鑫旭：IE6 下 png 背景不透明問題的綜合拓展](http://www.zhangxinxu.com/wordpress/2009/08/ie6 下 png 背景不透明問題的綜合拓展/)

七。JS 對象字面量中多餘的逗號

js 對象字面量中最後一個屬性末尾的逗號會引起 IE6/7 錯誤，IE8 可能報錯，其它高級瀏覽器不會報錯，所以為了更好的兼容性，對象字面量中不要有多餘逗號

八。頁面跳轉（重定向）與刷新（重新載入）

跳轉和刷新的本質是一樣的（刷新算是跳轉到當前頁面），姑且統稱為跳轉，一般實現方式是location.href = strUrl;，還有其它實現方式，這裡不深究，我們關注的是重定向之後發生了什麼？

重定向語句執行後頁面立即跳轉嗎？不是。頁面要等待所有 js 腳本執行完畢後才跳轉，不信可以測試一下，提供一個巧妙的測試方法：

location.href = 'http://ayqy.net/';
while(true);

按下 F12 打開控制台，執行上面的代碼，然後發現頁面卡死或者瀏覽器崩潰就足夠說明問題了

注意，其它任何形式的跳轉都一樣要等待腳本執行完畢才會跳轉，包括 location.reload(false/true);包括模擬觸發 a 標籤跳轉事件

九。NaN 與位運算

NaN（Not a Number）並非與任何數做任何運算結果都是 NaN，做數值運算是這樣沒錯，但位運算會把 NaN 當作二進制 0 處理，所以NaN | 1 === 1 && NaN | 0 === 0

十。待續 2015-6-11

參考資料

《編寫高質量代碼 Web 前端開發修煉之道》