IE6中select组件与css中z-index的冲突

在Positioned Elements and OS Controls, Applets and Plug-ins这篇文章中，描述了当position为absolute一个DIV被拖到select组件上方的时候，在IE6中，select组件会透过DIV层显示出来，这并不是想要的效果，这个问题并非是一个bug，因为在IE6中，select元素是一个window控制组件，并不支持z-index属性，在IE7之后则开始支持z-index属性，更详细的说明可查看MSDN关于select的文档：
From Microsoft Internet Explorer 5 to Internet Explorer 6, This element is a windowed control and does not support the z-index attribute or zIndex property.
As of Internet Explorer 7, this element is windowless and supports the z-index attribute and the zIndex property. The SELECT element does not require a strict doctype to enable windowless functionality.
This element is an inline element.
This element requires a closing tag.

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.

CSS 2.1 Tutorial (Basic Terms and Concepts)

CSS element basic types

• Replaced and nonreplaced
• Inline and block-level
• Replaced element: img/object/input，占位元素，在文档中起占位符作用，内容由元素本身决定(img)，或者元素类型可以替换（如input)。
• Nonreplaced element: 非占位元素，其内容由浏览器渲染得到，并且内容包含于文档中。

Block-level element

• Normal flow: The left-to-right, top-to-bottom rendering of text.
• Root element: html
• Block element seven properties (three width properties can be set auto)
• “background”是指content, padding and border区域的背景
• Margins永远是透明的(transparent)

Box Model

• IE Box Model Issues
• width in IE: border + padding + width
• CSS box model hack

Inline element

• Content area：nonreplaced element(font-size) and Replaced element(vertical seven properties)
• Leading (行间空白): ‘line-height’ 减 ‘font-size’
• (注意：行间空白只对nonreplaced元素起作用)
• Inline box: line-height(nonreplaced) and content area(replaced)
• Line box: 当前行中最高的inline box的顶到最低的inline box的底组成的box
• ‘line-height’, ‘vertical-align’ and ‘font-size’这三个属性会影响当前行的高度
• inline nonreplaced element border: 由’font-size’控制其边框，而不是’line-height’，边框会环绕在content area上
• inline replaced elements能增高line box，但是不会使line-height加高
• 为inline replaced element添加padding/border/margin可以增高inline-box
• inline nonreplaced element的padding, borders, margin不会影响line-height，并且margin-top/margin-bottom设置了是不会生效的,但margin-left /margin-right会生效

display: list-item

• 除inline和block-level元素外，还有一个特殊的元素LI，display: list-item
• list-item: LI此属性的默认值，该值使一个元素生成一个原始块框(principal box)和一个列表框(block box)

About margins

• margin is always transparent
• navigate value margin for css effects
• collapsing margins (边距重合)
• horizontal margins never collapse.
• Vertical margins may collapse between certain boxes.

1. 常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。
2. 在一个浮动框和其它框之间的垂直边距不重合。
3. 绝对和相对定位的框的边距不重合。

Positioning

• static: 默认值。无特殊定位
• relative: 依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置，占据原来的正常文档流中的空间位置
• absolute: 将元素从文档流中拖出，使用 left，right，top，bottom 等属性相对于其最接近的一个具有定位设置的父元素 (position非static元素)进行绝对定位。如果不存在这样的父元素，则依据 body元素
• fixed: 与absolute一样从正常文档流中拖出，区别在于其定位的容器是屏幕窗口(viewpoint)
• ‘top’, ‘right’, ‘bottom’, ‘left’只能针对position非static元素设置
• containing block： 为绝对定位的元素提供定位容器的，位置属性非static的元素

Floats and Clear

• float: 当该属性不等于 none 引起对象浮动时，对象将被视作块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略
• clear在布局中与float同时使用的情况较多

CSS specificity value

• specificity值表示方法: 0,0,0,0
• id:0,1,0,0
• class:0,0,1,0
• element:0,0,0,1
• h1 {color: red;} /* specificity = 0,0,0,1 */
• p em {color: purple;} /* specificity = 0,0,0,2 */
• .grape {color: purple;} /* specificity = 0,0,1,0 */
• *.bright {color: yellow;} /* specificity = 0,0,1,0 */
• p.bright em.dark {color: maroon;} /* specificity = 0,0,2,2 */
• #id216 {color: blue;} /* specificity = 0,1,0,0 */
• div#sidebar *[href] {color: silver;} /* specificity = 0,1,1,1 */

Selectors

• * { sRules } 通配选择符
• *.div { text-decoration:none;
• E { sRules } 类型选择符
• a { text-decoration:none; }
• E1 E2 { sRules } 包含选择符 Descendant Selectors
• table td { font-size:14px; }
• E1 > E2 { sRules } 子对象选择符 Selecting Children (IE6 not support)
• div ul>li { font-size:14px; }
• #ID { sRules } ID选择符
• E.className { sRules } 类选择符
• E1 + E2 {sRules} 相邻节点选择符 Selecting Adjacent Sibling Elements
• h1 + p {margin-top: 0;}
• E1 , E2 , E3 { sRules } 分组选择符 grouping selectors
• 将同样的定义应用于多个选择符
• E : Pseudo-Classes { sRules }
• div:first-letter { font-size:14px; }
• a.fly :hover { font-size:14px; color:red; }

属性选择符

• 1. E [ attr ] { sRules }
• 2. E [ attr = value ] { sRules }
• 3. E [ attr ~= value ] { sRules }
• example: class partial value
• 4. E [ attr *= value ] { sRules }
• substring
• 5. E [ attr ^= value ] { sRules }
• 6. E [ attr $= value ] { sRules }
• 7. E [ attr |= value ] { sRules } (explode by ‘-’)
• a[href][title] {font-weight: bold;} /*multiply attributes*/
• *[lang|="en"] {color: white;} /*en or begin with en-*/

About CSS classes

• 如果某个元素具有特殊意义，在文档中只出现一次，则可使用id，同时也有利于js操作此节点。如果有不同的元素都可能用到相同的一个css效果，如div/p/a/span等，则可使用class
• 一个元素的class的值可以是以空格间隔的一系列class名，如：
• <p class=”urgent warning”>这个P元素有二个css class</p>

Position is everything

Reference:
5. Selectors
http://www.w3.org/TR/CSS21/selector.html
8. Box model
http://www.w3.org/TR/CSS21/box.html
9. Visual formatting model
http://www.w3.org/TR/CSS21/visuren.html
10. Visual formatting model details
http://www.w3.org/TR/CSS21/visudet.html

EmulatingFixedPositioning in IE

/* For fixed positioning savvy browsers */
.fixed{
position: fixed;
}

#header{
top: 0;
left: 0;
height: 80px;
}

#footer{
bottom: 0;
left: 0;
height: 30px;
}

body{
padding: 80px 0 30px;
}

/* For IE for Windows \*/
* html{
width: 100%;
height: 100%;
overflow: hidden;
}

* html body{
width: 100%;
height: 100%;
overflow: auto;
}

* html .fixed{
position: absolute;
}
/* */

Reference: http://css-discuss.incutio.com/?page=EmulatingFixedPositioning

HTML中的空白对页面元素布局的影响

<!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>HTML中的空白(空格)对页面元素布局的影响</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
span {
border: 1px #333 solid;
}
</style>
</head>

<body>
<span>测试</span> <span> 开始标签前的空白会覆盖开始标签后的空白。</span> <span> 测试</span>
<br /><br />
<span>结束标签前的空白会覆盖结束标签后的空白。 </span> <span>此文字之前的空白被前面的结束标签前的空白覆盖。</span>
<span>测试 </span> <span>测试</span>
<br /><br />
<span>结束标签前的空白会覆盖结束标签后的空白，而开始标签前的空白又覆盖了后面的空白。 </span> <span> 此文字之前的空白被前面开始标签前的空白覆盖，而开始标签前的空白也被前面的空白覆盖。</span>
<span>测试 </span> <span>测试</span>
</body>
</html>

以上结果基于firefox/safari/opera测试，IE未测试，神奇的IE表现肯定与众不同。

对于inline elements使用的几点说明

对于inline elements：
1、设置margin-top, margin-bottom这二个属性是无效的，但是有margin-left, margin-right。
2、设置以下几个属性也是无效的：min-width, min-heigth, width, heigth, max-width, max-height，另width的几个属性应用于table rows也是无效的，而height的几个属性应用于table columns也是无效的。
3、对于vertical-align，则只能对inline elements和table-cell elements生效。

CSS border-color 说明

设置Block Element的边框属性是比较常见的，如:

.divBorder {
border: #ddd 5px solid;
}

但有时候Block Element需要设置一个宽度，却不需要设置颜色，可将border-color设置为transparent，如下所示：

.divBorder {
border: transparent 5px solid;
}

IMG is an inline element

<head>
<style type="text/css">
#div1, #div2 {
border: #333 1px solid;
background-color: #333;
height: 300px;
}
#img1 {
display: block;
}
#img2 {
vertical-align: sub; /* bottom, middle */
}
</style>
</head>
<body>
<div id="div1"><img id="img1" src="/images/puzzle1.jpg"/></div>
如果img对象不设置一下display或者vertical-align等属性，会在div底部多出一点空白，
这个就是因为img是一个inline element。
<div id="div2"><img id="img2" src="/images/puzzle2.jpg"/></div>
</body>

CSS element position 计算公式

以下部分element.style的属性值需要用到parseInt(value || 0)来转换。

• clientWidth ＝ element.style.paddingLeft + element.style.width + element.style.paddingRight
  
• clientHeight = element.style.paddingTop + element.style.height + element.style.paddingBottom
  
• clinetLeft = borderLeftWidth
  
• clientTop = borderTopWidth
  
• clientRight = offsetWidth - clientWidth - clientLeft
  
• clientBottom = offsetHeight - clientHeight - clientTop
  
• element.style.left = element.offsetLeft - element.style.marginLeft
  
• element.style.top ＝ element.offsetTop - element.style.marginTop
  

当元素的offsetParent不是BODY时，上面最后二个公式需要特别注意。

Element offset value will change in page render stage

<!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>offset will change in page render stage</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<img id="image" src="http://www.google.com/logos/closing_ceremonies.gif"/>
<p>test <span id="span" style="color: blue; border: 2px solid orange; padding: 5px; background-color: yellow;">
offset will change</span> in page render stage
</p>
<script type="text/javascript" charset="utf-8">
var span = document.getElementById("span");
alert([span.offsetLeft, span.offsetTop]);
setTimeout(function(){
alert([span.offsetLeft, span.offsetTop]);
}, 1000);
</script>
</body>
</html>

比如上面的例子中，在span这个元素前还有一张图片是从服务器外部载入的，在页面渲染过程中，这个span对象会被先渲染到页面上，并有了对应的offset值，但当图片被载入页面之后，span元素又往下移了，此时offset值重新计算了，注意在opera测试中要每次清一下缓存才能看到效果。

如何使div内容居中

#div1, #div2 {
display: table-cell;
*display: inline; /* hack ie */
height: 200px;
vertical-align: middle;
border: #000 1px solid;
}

zindex of css

在css2.1规范中指出，如果元素的zindex值一样的话，并发生重叠，则按文档流的次序，后来者居上(from back to front)。

用CSS中的overflow 控制表格单元格文字的显示长度

对于td中包含中英文，需要将超长部分隐藏，用js控制是最方便的，也可以用CSS的overflow:hidden进行控制，这个对于二字节的字符显示支持不够友好些。

解决IE6的浮动元素的双倍边距问题

对一个div设置了float:left 和 margin-left:100px 那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下：

div {float:left;margin:40px;display:inline;}

Reference:http://www.javaeye.com/news/3176

Removing The Dotted Outline

a {
outline: none;
}

Reference:
http://whalesalad.com/2007/11/26/outline-none/
http://css-tricks.com/removing-the-dotted-outline/

CSS inline-box and auto margin

line-height只对内联元素有效，对于块元素设置其实是作用在其内部的内联元素上。
水平七属性中margin-left、margin-right、width的值可以设置为auto，其他四个属性不能设置为auto。
水平七属性相加的值总是等于其父元素的width值。
margin的值可以取负值，padding和width不能取负值。
一行中，不同内联元素的内联框位置并不一定相同，根据line-hight、font-size计算，并受vertical-align影响。以下公式在vertical-align基于baseline的计算方法：
内联框的上边框位置：font-size - (font-size - line-height) / 2
内联框的下边框位置：font-size + (font-size - line-height) / 2
行间距等于该行中所有内联元素的内联框(inline-box)的最高位置减最低位置。

margin 和内联元素(inline elements)的关系

当将margin应用于内联元素时，margin的上下边距将不会影响到行高[产生的margin是存在的，不过因其是透明的故不能看得到]，左右边距则会影响内联元素的左右间距。如果将一个将粗的border应用于内联元素上时，行高也不会发生变化，border将会覆盖其他元素的显示。
能够改变全文本的行间距的CSS属性只有:
1、line-height
2、font-size
3、vertical-align

关于CSS中的position和float的二点说明

1、当float的元素的margin为负值时，其周边元素内容可能会覆盖到float元素上面。当float元素宽度大于容器宽度并margin为负值时，会使得float元素在容器二边都超出。
2、position: absolute的元素的一系列上级元素如果具有position:absolute/relative/fixed属性时，会根据其上级元素进行绝对定位。如果其上级元素没有position属性，则根据整个html文档定位。

CSS float and document flow difference between firefox and ie7

<!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" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=GBK"/>
<title>css float and document flow difference between firefox and ie7</title>
<style type="text/css">
.paragraphs {border: 1px solid #ccc; width: 300px; float: left; margin: 10px;}
.divs {border: 3px double #333; width: 600px; margin: 2px;}
</style>
</head>
<body>
text content before float elements, blah, blah.......<br />
text content before float elements, blah, blah.......
<p class="paragraphs">
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
text content in paragraph which is left float.
</p>
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
text content after float elements, blah, blah.......
<div class="divs">
text content in normal document flow, which container start point (left top) start after content ignore the float elements(double border div element), and which content will follow float elements. IE has some different tankle with this content, this container start point will after float element.
<br />
text content in normal document flow, which container start point (left top) start after content ignore the float elements(double border div element), and which content will follow float elements. IE has some different tankle with this content, this container start point will after float element.
</div>
</body>
</html>

[CSS Zen Garden] CSS absolute position and relative position explain

Absolute Positioning:
Understanding absolute positioning means understanding the concept of the document flow.
Absolute positioning provides the ability not only to move an element anywhere within the page, but also to remove it from the document flow. An absolutely positioned block no longer influences other elements within the document, and the linear flow continues as if that block doesn't exist.
Relative positioning:
Relative positioning, on the other hand, will not remove an element from the document flow. Based on the element's starting position, a relative position will offset it and then effectively leave a hole behind that other elements must negotiate, as if the element were still positioned there.
A relatively positioned element stays within the document flow; its originating position continues to affect other elements, whereas its new position is ignored by the document flow.
Relative positioning is mostly useful for offsetting elements; an element with a starting position inside a traditional grid may be easily moved outside the grid structure, and elements can be finely adjusted when other positioning options aren't possible. For example, Savarese employs relative positioning to move the dragon at the bottom of the design from a starting point below the white content area, to its final spot at the left of the footer area. Using absolute positioning to position elements near the bottom of a design is much more difficult than positioning them near the top, so this instance of relative positioning makes the adjustment easier.

#extraDiv1 {
background-image:url(Dragon.gif);
background-position:left top;
background-repeat:no-repeat;
height:206px;
left:-360px;
margin:0pt auto;
position:relative;
top:-225px;
width:96px;
}

reference:
http://www.csszengarden.com/?cssfile=070/070.css