collapsing margins of table

display=block的元素，垂直方向的collapsing margins会发生重合。
IE8/safari/chrome中table默认的display=table，其渲染时vertical margin会发生重合，与display=block的元素效果一样，但在firefox中测试其效果与float元素的效果一样，不会发生垂直方向的margin重合。
个人的解决方法是将table设置为float=left，并在其后设置一个clear=both的DIV，避免table的margin被重合。

关于collapsing margins详细说明可查看CSS21规范的8.3.1 Collapsing margins。
另外对于一个maring:10px的DIV元素，如果此元素没有内容，并没有设置padding和border值，其上部的margin与其下部的margin也会重合，也就是此DIV在垂直方向上只会占据10px的高度。如果此DIV的top或者bottom与别的元素发生过重合，则其本身的top和bottom margin不会再重合。
规范原文说明如下：
If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
If the element’s margins are collapsed with its parent’s top margin, the top border edge of the box is defined to be the same as the parent’s.
Otherwise, either the element’s parent is not taking part in the margin collapsing, or only the parent’s bottom margin is involved. The position of the element’s top border edge is the same as it would have been if the element had a non-zero top border.

ie中空白渲染的问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<form action="test_submit" method="get" accept-charset="utf-8">
<input type="text" name="some_name" value="" id="name">
<div id="x" style="white-space:pre;">x xx x</div>
<div id="y">y yy y</div>
<p><input type="button" value="click here" onclick="document.getElementById('name').value=document.getElementById('x').innerHTML"></p>
<p><input type="button" value="click here" onclick="document.getElementById('name').value=document.getElementById('y').innerHTML"></p>
</form>
</body>
</html>

上面的例子在ie6/ie7中测试时可发现y组成的字符串，其中的空格被ie渲染过后，取到的innerHTML已经变为一个空格了，在firefox/safari上在渲染后看上去是只有一个空格，但innerHTML取到的还是与原码是保持一致的。

[CSS Zen Garden] Position fixed property of CSS2 and IE6

Exploiting the fact that Internet Explorer lacks support for fixed positioning and for child selectors, a series of rules were created to deliver the optimal design to browsers that comply with the rules of CSS, and to deliver the alternate design to Internet Explorer:

body#css-zen-garden>div#extraDiv2 {
background-image: url(bg_face.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: fixed;
left: 0;
bottom: 0;
height: 594px;
width: 205px;
z-index: 2;
}

The following CSS is applied only in browsers that don't understand the previous rule, in this case Internet Explorer. Because the child selectors imply greater specificity, the former rule takes precedence, but only if the browser understands it.

div#extraDiv2 {
background-image: url(bg_face_ie.jpg);
background-repeat: no-repeat;
background-position: left bottom;
position: absolute;
left: 0;
bottom: 0;
height: 600px;
width: 265px;
}

While the fixed-position image scrolls off the page in Internet Explorer 6.0, the design is still attractive and acceptable.

IE7 has supported position fixed property if it’s in standard mode.
reference:
http://www.csszengarden.com/?cssfile=037/037.css

JavaScript and the ECMA Specification

Netscape invented JavaScript, and JavaScript was first used in Netscape browsers. However, Netscape is working with ECMA (European Computer Manufacturers Association) to deliver a standardized, international programming language based on core JavaScript. ECMA is an international standards association for information and communication systems. This standardized version of JavaScript, called ECMAScript, behaves the same way in all applications that support the standard. Companies can use the open standard language to develop their implementation of JavaScript. The first version of the ECMA standard is documented in the ECMA-262 specification.