html頁面高度不固定在不同瀏覽器下的兼容性設置

2020-03-24 15:58:35

字體：大中小

來源：轉載

供稿：網友

頁面需要嵌套在跨域的iframe中，而頁面高度不固定，需要每個頁面把自己的高度獲得后，通過js通知iframe調整顯示。
而頁面在獲得自己的高度時，發現總是比預想的大。經過參考別人的博客，發現原來是w3c標準的原因。
也就是要在 html 前面加上 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
加上之后，document.documentElement.scrollHeight在IE和Chrome下，可以正常取到合適的全文高度，但是firefox下取到的則過高；用document.body.scrollHeight取則恰好相反。
因此最后采用了Math.min(document.documentElement.scrollHeight,document.body.scrollHeight)獲得最小高度，正常。
但是加上W3C標準后，畫面也出現了一些小的不同，比如頁面的行間距，似乎IE的就要短一些，有些地方重合了。而且css也會嚴格區分大小寫。

參考文章url：
http://www.phpstudy.net/article/19844.htm
http://www.phpstudy.net/article/32874.htm

內容：
js獲取頁面高度 2011-06-02 14:20:02| 分類：JavaScript | 標簽：body document clientwidth 寬度頁面高度 |字號大中小訂閱.

復制代碼代碼如下:
script
function getInfo()
{
var s = "";
s += " 網頁可見區域寬："+ document.body.clientWidth;
s += " 網頁可見區域高："+ document.body.clientHeight;
s += " 網頁可見區域寬："+ document.body.offsetWidth + " (包括邊線和滾動條的寬)";
s += " 網頁可見區域高："+ document.body.offsetHeight + " (包括邊線的寬)";
s += " 網頁正文全文寬："+ document.body.scrollWidth;
s += " 網頁正文全文高："+ document.body.scrollHeight;
s += " 網頁被卷去的高(ff)："+ document.body.scrollTop;
s += " 網頁被卷去的高(ie)："+ document.documentElement.scrollTop;
s += " 網頁被卷去的左："+ document.body.scrollLeft;
s += " 網頁正文部分上："+ window.screenTop;
s += " 網頁正文部分左："+ window.screenLeft;
s += " 屏幕分辨率的高："+ window.screen.height;
s += " 屏幕分辨率的寬："+ window.screen.width;
s += " 屏幕可用工作區高度："+ window.screen.availHeight;
s += " 屏幕可用工作區寬度："+ window.screen.availWidth;
s += " 你的屏幕設置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕設置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
/script

在我本地測試當中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可獲得，很簡單，很方便。
而在公司項目當中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原來是W3C的標準在作怪啊
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
如果在頁面中添加這行標記的話

在IE中：
document.body.clientWidth == BODY對象寬度
document.body.clientHeight == BODY對象高度
document.documentElement.clientWidth == 可見區域寬度
document.documentElement.clientHeight == 可見區域高度

在FireFox中：
document.body.clientWidth == BODY對象寬度
document.body.clientHeight == BODY對象高度
document.documentElement.clientWidth == 可見區域寬度
document.documentElement.clientHeight == 可見區域高度

在Opera中：
document.body.clientWidth == 可見區域寬度
document.body.clientHeight == 可見區域高度
document.documentElement.clientWidth == 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight == 頁面對象高度（即BODY對象高度加上Margin高）
而如果沒有定義W3C的標準，則

IE為：
document.documentElement.clientWidth == 0
document.documentElement.clientHeight == 0

FireFox為：
document.documentElement.clientWidth == 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight == 頁面對象高度（即BODY對象高度加上Margin高）

Opera為：
document.documentElement.clientWidth == 頁面對象寬度（即BODY對象寬度加上Margin寬）document.documentElement.clientHeight == 頁面對象高度（即BODY對象高度加上Margin高）

真是一件麻煩事情，其實就開發來看，寧可少一些對象和方法，不使用最新的標準要方便許多啊。更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html 基于 canvas 實現截圖的介紹

下一篇：ASP.NET中HTML頁面的訪問驗證設置方法