要建立符合標準的網頁,DOCTYPE聲明是必不可少的關鍵組成部分;除非你的XHTML確定了一個正確的DOCTYPE,否則你的標識和CSS都不會生效;當然對JS的取值也會有影響。
DOCTYPE聲明如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE聲明包括:過渡型(Transitional),嚴格型(Strict)和框架型(Frameset)。接下來就看一下這三種類型對不同瀏覽器在獲取元素相關信息時的影響(包括不定義DOCTYPE和只將DOCTYPE定義為<!docType>形式),我測試的瀏覽器分別為:IE6.0、IE7.0、IE8.0(變態模式)、FF、Opera、Chrome和Safari。由于IE5.5已經幾乎被淘汰,所以不在測試范圍之內。
以下就是測試結果(滾動條只是元素本身的滾動條并不是窗口的):
一、過渡型(Transitional)
1、測試IE6.0、IE7.0與IE8.0(非變態模式Quirks)的寬度和高度(width,height)
offsetWidth,offsetHeight | clientWidth,clientHeight | currentStyle[‘width'],currentStyle[‘width'] |
有無滾動條均為: | 1、無滾動條 | 實際真實寬度,不包括padding與邊框值 |
offsetLeft,offsetTop | clientLeft,clientTop | currentSytle[‘left'],currentStyle[‘top'] |
有無滾動條均為: | 有無滾動條均為:邊框的寬度 | 除IE和Opera以外無此屬性 |
2、測試IE8.0變態模式(Quirks)的寬度與高度(width,height)