Web Frontend Development Subtle Common Knowledge

1. How to Trigger IE6/7's hasLayout

Often see some popular hacks with height: 1%; or zoom: 1; such things, can't work without them, actually this is used to trigger IE6/7's hasLayout property:

height: 1%; will be parsed as min-height under IE6, but not applicable to IE7, zoom: 1; can trigger IE7's hasLayout

Used a lot in browser compatibility hacks, for example .clearfix used to solve box collapse problem uses height: 1%;

P.S. For more information about box collapse problem please check [黯羽轻扬：4 Solutions to CSS Box Collapse Problem](http://ayqy.net/blog/CSS 盒子坍塌问题的 4 种解决方案/)

2. CSS Hack for IE

1. IE Conditional Comments

Disadvantage: Need to maintain same styles in multiple files simultaneously, poor maintainability

2. Selector Prefix Method

*html prefix only effective for IE6, *+html prefix only effective for IE7, for example:

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

    *html .test{
        /* IE6 */
    }

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

Disadvantage: Risk in backward compatibility, IE8/9/10 may also recognize *html and *+html prefixes, and cannot be used for inline styles

3. Style Property Prefix Method

_ only effective for IE6, * effective for both IE6/7, for example:

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

Disadvantage: Also has risk in backward compatibility, but can be used for inline styles

Recommended practice is to use IE-supported conditional comments, but in actual application should adopt appropriate method based on project scale and other factors

3. Special Cases of margin

Adjacent margin-top and margin-bottom will overlap, but margin-left and margin-right won't, so don't mix use, should agree on which one to use only at project beginning

4. Special Cases of Style Override Rules

Styles have specificity, or weight, style rules with same specificity later declarations will override earlier declarations

Note it's declaration order, not the order in element class attribute value string, for example:

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

<p class="myStyle1 myStyle2">Green</p>
<p class="myStyle2 myStyle1">Also green</p>

The order of style names in class attribute value string has no effect on style override rules

P.S. As for what specificity is, what are the specific calculation rules, please check [黯羽轻扬：](http://ayqy.net/blog/CSS 选择器分类总结/)

5. Optimization Techniques for DOM Operations

Most basic technique is to cache DOM node objects, avoid frequent DOM lookup overhead, additionally there are small tricks to optimize DOM lookup:

First use byId to narrow lookup scope, then use byTagName to get elements, for example:

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

Note the commented part above, any element has getElementsByTagName method, but only document element has getElementById method

P.S. For more DOM optimization techniques, please check [黯羽轻扬：JS Learning Notes 12_Optimization](http://ayqy.net/blog/JS 学习笔记 12_优化/)

6. IE6 PNG Transparency

Under IE6 PNG image transparent parts display as pink (light blue?), can be fixed with IE filter:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image path", sizingMethod="crop");

For example:

.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");
}

After using this filter transparent pixels display normally under IE6, for more solutions to IE6 and PNG transparency please check [张鑫旭：Comprehensive Extension of PNG Background Transparency Problem in IE6](http://www.zhangxinxu.com/wordpress/2009/08/ie6 下 png 背景不透明问题的综合拓展/)

7. Extra Commas in JS Object Literals

The comma at the end of the last property in js object literal will cause IE6/7 errors, IE8 may report error, other advanced browsers won't report error, so for better compatibility, don't have extra commas in object literals

8. Page Redirect (Redirection) and Refresh (Reload)

Redirect and refresh are essentially the same (refresh counts as redirecting to current page), let's collectively call it redirect, general implementation is location.href = strUrl;, there are other implementation methods, won't go deep here, what we care about is what happens after redirection?

Does page redirect immediately after redirect statement executes? No. Page waits for all js scripts to finish executing before redirecting, if you don't believe it can test, provide a clever test method:

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

Press F12 to open console, execute the code above, then find page freezes or browser crashes is enough to explain the problem

Note, any other form of redirect also must wait for scripts to finish executing before redirecting, including location.reload(false/true); including simulating triggering a tag redirect event

9. NaN and Bitwise Operations

NaN (Not a Number) does not result in NaN when doing any operation with any number, this is correct for numerical operations, but bitwise operations treat NaN as binary 0, so NaN | 1 === 1 && NaN | 0 === 0

10. To be continued 2015-6-11

Reference Materials

• "Writing High-Quality Code: The Way of Web Frontend Development Cultivation"