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"