1.xhtml下滾動條的顏色問題
在原來的html的時候，我們可以這樣定義整個頁面的捲軸：
body{
scrollbar -3dlight-color:#D4D0C8; /*- 最外左-*/
# scrollbar-highlight-color:#fff; /*- 左二-*/
scrollbar-face- color:#E4E4E4; /*- 面子-*/
scrollbar-arrow-color:#666; /*- 箭頭-*/
# scrollbar-shadow-color:#808080; / *- 右二-*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一-*/
scrollbar-base-color:#D7DCE0; /*- 基底色- */
scrollbar-track-color:#;/*- 滑軌-*/
}
但是同樣的程式碼，我們應用在xhtml下就不起作用了，我相信好多好朋友也遇到同樣的問題。
那麼怎麼才能在xhtml下套用捲軸樣式呢？看下列程式碼：
html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左-*/
scrollbar-highlight-color:#fff ; /*- 左二-*/
scrollbar-face-color:#E4E4E4; /*- 面子-*/
scrollbar-arrow-color:#666; /*- 箭頭-*/
scrollbar-shadow-color:#808080; /*- 右二-*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一-*/
scrollbar-base-color:#D7DCE0; /*- 基底色-*/
scrollbar-track-color:#;/*- 滑軌-*/
}
這段程式碼和上一段唯一的不同就是在css定義的元素上，一個是body一個是html。我們再測試一下，把html頁面的「body」修改成「html」測試一下，發現依然可以實現效果。那到底是為什麼呢？
我們來看看下面的圖：
這就是html最基本的dom樹結構。
我們再看看html和xhtml的定義：
HTML （Hyper Text Markup Language，超檔案標記語言），超檔案標記語言廣泛應用於國際互聯網上.HTML描述了文本基準如何進行呈現,以及超級連接如何連接到另外的頁面。
XHTML (Extensible Hypertext Markup Language，可擴展的超文件標記語言)，是一種標記語言，表現方式與 HTML類似， 不過語法上更加嚴格。從繼承關係上講，HTML是一種基於SGML的應用，非常靈活，而XHTML則是基於XML，XML是SGML的子集。 XHTML 1.0 在2000年1月26日成為 W3C 的建議標準。
從字面上來看，xhtml比html多一個x,那麼這個x其實也就是xml,為什麼要加一個xml在裡面？其實最根本的原因就是要讓html更結構化標準化（因為html實在太爛）。
OK，我們回來看上面的結構樹，我們在html裡面定義的是body，因為html不是很標準所以這樣可以生效，而在xhtml裡面這樣就不行了，我看看那個圖很明顯，body標籤本身不是根元素，只有html才是根元素，而頁面的捲軸也是屬於根元素的，所以這就是我們為什麼定義body沒有效果的原因，因為我們定義的只是一個子原素。 OK，我們知道了原理，來做一個試驗如果把定義“body”或“xhtml”換成“*”：
*{
# scrollbar-3dlight-color:#D4D0C8; /*- 最外左-*/
scrollbar-highlight-color:#fff; /*- 左二-*/
# scrollbar-face-color:#E4E4E4; /*-面子-*/
scrollbar-arrow-color:#666; /*- 箭-*/
scrollbar-shadow-color:#808080; /*- 右二-*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一-*/
scrollbar-base-color:#D7DCE0; /*- 基底色-*/
# scrollbar-track-color:#;/*- 滑道-*/
}
#在html和xhtml都通過，因為*就是定義頁面上的任何標籤當然也包括了“ html”這個標籤。
（ps:其實與其說是html與xhtml的區別到不如說是有無XHTML 1.0 transitional doctype的區別，但是如果你把頁面的XHTML 1.0 transitional doctype去掉的話，那麼這個頁面就沒有doctype ，預設的顯示方式就是html4.01,不過你要把XHTML 1.0 transitional doctype修改成HTML 4.01 doctype同樣頁面定義body也不會有效果的，雖然這個頁面的標準是html 4.01）
2 、xhtml下frame頁面橫向滾動條的問題
在用ie6瀏覽有框架的xhtml頁面的時候，預設會水平和垂直滾動條會一起出現，這是ie6的一個bug，在firefox上是正常的，出現的原因是其對XHTML 1.0 transitional doctype的解釋缺陷。
對於這個bug一般有3種解決方案，
方法1：
#程式碼：
html { overflow-y: scroll; }
原理：強制顯示ie的垂直捲軸，而忽略水平捲軸。
優點：完全解決了這個問題, 允許你保持完整的XHTML doctype 。
缺點：即使頁面不需要垂直捲軸的時候也會出現垂直捲軸。
方法2：
程式碼：
#html { overflow-x: hidden; overflow-y: auto; }
原理：隱藏橫向捲動，垂直捲動根據內容自適應。
優點：在視覺上解決了這個問題。在不必要的時候，未強制垂直滾動條出現。
缺點：只是隱藏了水平捲軸，如果頁面真正需要水平滾動條的時候，螢幕以外的內容會因為使用者無法水平滾動，而看不到。
方法3:
程式碼：
body { margin-right: -15px; margin-bottom: -15px; }
#原則：這會在margin的水平和垂直方向上加上一個負值，IE加入了該精確數值後，便會移除對滾動條的需求假象。
優點：在視覺上解決了這個問題，垂直滾動根據內容自適應。
缺點：由於「人為創建」了15px的外邊距(margin)，所以無法使用該填滿過的螢幕區域。
以上是關於HTML中的捲軸/去掉捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章！
