Css 兼容

     首先有abc三数，如选择符中有ID选择符，则a加1， 如果有属性选择符、类型选择符或伪类则b加1，如果有类选择符，则c加1。

     如：#div DIV  则abc ＝ 101。
     层叠选择调用数字最高的样式。

.firstChild :first-child
{...} {
    color: Green;
}

div > :first-letter
{...} {
    font-size: 40px;
}
div + em 
{...} {
    color:blue;
}
div > em + p
{...} {
    color: Red;
}

.MoneyRMB P:before
{...} {
    content: "$";
    color: Red;
}
.MoneyRMB P:after
{...} {
    content: "RMB";
    color: Blue;
}

 

     < h5 > green? </ h5 >
     < div > havn't css. </ div >
     < em > text color is blue </ em >
     < b > bbbbbbbbbbbbbbbb </ b >
     < hr  />
     < div  class ="firstChild" >
         < em > em1 </ em >
         < em > em2 </ em >
         < p > p is red. </ p >
     </ div >

     < dl  class ="MoneyRMB" >
         < dt > Before/After : content, IE 不支持。 </ dt >
         < dd >
             < p > 100 </ p >
             < p > 200 </ p >
             < p > 300 </ p >
         </ dd >
     </ dl >

---

li.parent  {
    background-color :  #EAEAFF ;
}
li.sub  {
    background-color :  #FCFCFC ;
}
@media screen  {
  div.bottom {
    background-color :  #cccccc ;
    position :  fixed ;
    bottom :  0px ;
    left :  0px ;
    right :  0px ;
    height :  20px ;
   }
  div.top  {
    background-color :  white ;
   }
  div.Hide  {
   }
}
@media print  {
  div.bottom {
    position :  absolute ;
    top :  0px ;
   }
  div.top  {
    position :  relative ;
    top :  20pt ;
   }
  div.Hide  {
    visibility : hidden ;
   }
}

     < div >
       < div  class ="Hide" > hide me when in print media. </ div >
       < div  id ="PrintTop"  class ="top" >
         < ul >
             < li  class ="parent" > Item Description. </ li >
             < li >
                 < ul >
                     < li  class ="sub" > item1 </ li >
                     < li  class ="sub" > item2 </ li >
                     < li  class ="sub" > item3 </ li >
                     < li  class ="sub" > item4 </ li >
                     < li  class ="sub" > item5 </ li >
                     < li  class ="sub" > item6 </ li >
                     < li  class ="sub" > item7 </ li >
                     < li  class ="sub" > item8 </ li >
                     < li  class ="sub" > item9 </ li >
                     < li  class ="sub" > item0 </ li >
                     < li  class ="sub" > item1 </ li >
                     < li  class ="sub" > item2 </ li >
                     < li  class ="sub" > item3 </ li >
                     < li  class ="sub" > item4 </ li >
                     < li  class ="sub" > item5 </ li >
                     < li  class ="sub" > item6 </ li >
                     < li  class ="sub" > item7 </ li >
                     < li  class ="sub" > item8 </ li >
                     < li  class ="sub" > item9 </ li >
                     < li  class ="sub" > item0 </ li >
                     < li  class ="sub" > item1 </ li >
                 </ ul >
             </ li >
         </ ul >
       </ div >
       < div  id ="PrintBottom"  class ="bottom" >
        @SUMMARY bottom
       </ div >
     </ div >

---

vertical-align:

< style  type ="text/css" >
    span  { display : inline ;  border-top : solid 1px red ;  border-bottom : solid 1px red ;  height : 30px ; }
    img.img  { border : solid 1px blue ;  margin : 0px ;  width : 3px ;  height : 30px ; }
</ style >

< div  style ="width:700px; line-height: 50px; font-size:16px; border:solid 1px green; padding:5px;" >
     < span  style ="vertical-align:baseline;" > baseline-kp < img  class ="img"  src =""  alt =""   /></ span >
     < span  style ="vertical-align:middle;" > middle-kp < img  class ="img"  src =""  alt =""   /></ span >
     < span  style ="vertical-align:sub;" > sub-kp < img  class ="img"  src =""  alt =""   /></ span >
     < span  style ="vertical-align:super;" > super-kp < img  class ="img"  src =""  alt =""   /></ span >
     < span  style ="vertical-align:text-top;" > text-top-kp < img  class ="img"  src =""  alt =""   /></ span >
     < span  style ="vertical-align:text-bottom;" > text-bottom-kp < img  class ="img"  src =""  alt =""   /></ span >
     < span  style ="vertical-align:top;" > top-kp < img  class ="img"  src =""  alt =""   /></ span >
     < span  style ="vertical-align:bottom;" > bottom-kp < img  class ="img"  src =""  alt =""   /></ span >
     < hr  />
     < span > baseline-kp < img  class ="img"  src =""  alt =""   style ="vertical-align:baseline;" /></ span >
     < span > middle-kp < img  class ="img"  src =""  alt =""  style ="vertical-align:middle;"   /></ span >
     < span > sub-kp < img  class ="img"  src =""  alt =""  style ="vertical-align:sub;"   /></ span >
     < span > super-kp < img  class ="img"  src =""  alt =""  style ="vertical-align:super;"   /></ span >
     < span > text-top-kp < img  class ="img"  src =""  alt =""  style ="vertical-align:text-top;"   /></ span >
     < span > text-bottom-kp < img  class ="img"  src =""  alt =""  style ="vertical-align:text-bottom;"   /></ span >
     < span > top-kp < img  class ="img"  src =""  alt =""  style ="vertical-align:top;"   /></ span >
     < span > bottom-kp < img  class ="img"  src =""  alt =""  style ="vertical-align:bottom;"   /></ span >
</ div >

document.body.scrollTop；在文档页首没有加：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">

是以body为文档根元素，因此此时document.body.scrollTop是有值的，不是0，而此时document.documentElement.scrollTop反而是0。

当在文档页首加了DOCTYPE声明时,是以html元素为根元素，因此此时document.body.scrollTop总是0。

var scrollTop=document.compatMode=="CSS1Compat"?document.documentElement.scrollTop:document.body.scrollTop;

获取当前的文档渲染, 方式当文档有了标准声明时， document.compatMode 的值就等于 "CSS1compat"