html頁面高度不固定在不同瀏覽器下的兼容性設(shè)置
發(fā)布時間:2013-06-16 15:36:58 作者:佚名
我要評論

頁面需要嵌套在跨域的iframe中,而頁面高度不固定,需要每個頁面把自己的高度獲得后,通過js通知iframe調(diào)整顯示,具體實(shí)現(xiàn)以及不同瀏覽器兼容性設(shè)置如下,感興趣的朋友可以參考下哈
頁面需要嵌套在跨域的iframe中,而頁面高度不固定,需要每個頁面把自己的高度獲得后,通過js通知iframe調(diào)整顯示。
而頁面在獲得自己的高度時,發(fā)現(xiàn)總是比預(yù)想的大。經(jīng)過參考別人的博客,發(fā)現(xiàn)原來是w3c標(biāo)準(zhǔn)的原因。
也就是要在<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標(biāo)準(zhǔn)后,畫面也出現(xiàn)了一些小的不同,比如頁面的行間距,似乎IE的就要短一些,有些地方重合了。而且css也會嚴(yán)格區(qū)分大小寫。
參考文章url:
http://chabaoo.cn/article/19844.htm
http://chabaoo.cn/article/32874.htm
內(nèi)容:
js獲取頁面高度 2011-06-02 14:20:02| 分類:JavaScript | 標(biāo)簽:body document clientwidth 寬度 頁面高度 |字號大中小 訂閱.
<script>
function getInfo()
{
var s = "";
s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.clientWidth;
s += " 網(wǎng)頁可見區(qū)域高:"+ document.body.clientHeight;
s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.offsetWidth + " (包括邊線和滾動條的寬)";
s += " 網(wǎng)頁可見區(qū)域高:"+ document.body.offsetHeight + " (包括邊線的寬)";
s += " 網(wǎng)頁正文全文寬:"+ document.body.scrollWidth;
s += " 網(wǎng)頁正文全文高:"+ document.body.scrollHeight;
s += " 網(wǎng)頁被卷去的高(ff):"+ document.body.scrollTop;
s += " 網(wǎng)頁被卷去的高(ie):"+ document.documentElement.scrollTop;
s += " 網(wǎng)頁被卷去的左:"+ document.body.scrollLeft;
s += " 網(wǎng)頁正文部分上:"+ window.screenTop;
s += " 網(wǎng)頁正文部分左:"+ window.screenLeft;
s += " 屏幕分辨率的高:"+ window.screen.height;
s += " 屏幕分辨率的寬:"+ window.screen.width;
s += " 屏幕可用工作區(qū)高度:"+ window.screen.availHeight;
s += " 屏幕可用工作區(qū)寬度:"+ window.screen.availWidth;
s += " 你的屏幕設(shè)置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕設(shè)置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
< /script>
在我本地測試當(dāng)中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可獲得,很簡單,很方便。
而在公司項(xiàng)目當(dāng)中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原來是W3C的標(biāo)準(zhǔn)在作怪啊
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在頁面中添加這行標(biāo)記的話
在IE中:
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見區(qū)域高度
在FireFox中:
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見區(qū)域高度
在Opera中:
document.body.clientWidth ==> 可見區(qū)域?qū)挾?
document.body.clientHeight ==> 可見區(qū)域高度
document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)
document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)
而如果沒有定義W3C的標(biāo)準(zhǔn),則
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高)
真是一件麻煩事情,其實(shí)就開發(fā)來看,寧可少一些對象和方法,不使用最新的標(biāo)準(zhǔn)要方便許多啊。
而頁面在獲得自己的高度時,發(fā)現(xiàn)總是比預(yù)想的大。經(jīng)過參考別人的博客,發(fā)現(xiàn)原來是w3c標(biāo)準(zhǔn)的原因。
也就是要在<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標(biāo)準(zhǔn)后,畫面也出現(xiàn)了一些小的不同,比如頁面的行間距,似乎IE的就要短一些,有些地方重合了。而且css也會嚴(yán)格區(qū)分大小寫。
參考文章url:
http://chabaoo.cn/article/19844.htm
http://chabaoo.cn/article/32874.htm
內(nèi)容:
js獲取頁面高度 2011-06-02 14:20:02| 分類:JavaScript | 標(biāo)簽:body document clientwidth 寬度 頁面高度 |字號大中小 訂閱.
復(fù)制代碼
代碼如下:<script>
function getInfo()
{
var s = "";
s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.clientWidth;
s += " 網(wǎng)頁可見區(qū)域高:"+ document.body.clientHeight;
s += " 網(wǎng)頁可見區(qū)域?qū)挘?+ document.body.offsetWidth + " (包括邊線和滾動條的寬)";
s += " 網(wǎng)頁可見區(qū)域高:"+ document.body.offsetHeight + " (包括邊線的寬)";
s += " 網(wǎng)頁正文全文寬:"+ document.body.scrollWidth;
s += " 網(wǎng)頁正文全文高:"+ document.body.scrollHeight;
s += " 網(wǎng)頁被卷去的高(ff):"+ document.body.scrollTop;
s += " 網(wǎng)頁被卷去的高(ie):"+ document.documentElement.scrollTop;
s += " 網(wǎng)頁被卷去的左:"+ document.body.scrollLeft;
s += " 網(wǎng)頁正文部分上:"+ window.screenTop;
s += " 網(wǎng)頁正文部分左:"+ window.screenLeft;
s += " 屏幕分辨率的高:"+ window.screen.height;
s += " 屏幕分辨率的寬:"+ window.screen.width;
s += " 屏幕可用工作區(qū)高度:"+ window.screen.availHeight;
s += " 屏幕可用工作區(qū)寬度:"+ window.screen.availWidth;
s += " 你的屏幕設(shè)置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕設(shè)置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
< /script>
在我本地測試當(dāng)中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可獲得,很簡單,很方便。
而在公司項(xiàng)目當(dāng)中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox則使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原來是W3C的標(biāo)準(zhǔn)在作怪啊
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在頁面中添加這行標(biāo)記的話
在IE中:
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見區(qū)域高度
在FireFox中:
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?
document.documentElement.clientHeight ==> 可見區(qū)域高度
在Opera中:
document.body.clientWidth ==> 可見區(qū)域?qū)挾?
document.body.clientHeight ==> 可見區(qū)域高度
document.documentElement.clientWidth ==> 頁面對象寬度(即BODY對象寬度加上Margin寬)
document.documentElement.clientHeight ==> 頁面對象高度(即BODY對象高度加上Margin高)
而如果沒有定義W3C的標(biāo)準(zhǔn),則
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高)
真是一件麻煩事情,其實(shí)就開發(fā)來看,寧可少一些對象和方法,不使用最新的標(biāo)準(zhǔn)要方便許多啊。
相關(guān)文章
- 這篇文章主要介紹了淺談原生頁面兼容IE9問題的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起2020-12-16
新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn)
這篇文章主要介紹了新版chrome瀏覽器設(shè)置允許跨域的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起2020-11-30css hack之\9和\0就可能對hack IE11\IE9\IE8無效
每次設(shè)計一張網(wǎng)頁或一個表單,都被各種瀏覽器的兼容問題傷透腦筋,尤其是IE家族。在做兼容性設(shè)計時,我們往往會使用各種瀏覽器能識別的獨(dú)特語法進(jìn)行hack,從而達(dá)到各種瀏覽2020-03-20css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼
這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下2020-03-20- 這篇文章主要介紹了解決CSS瀏覽器兼容性問題的4種方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)2020-02-28
- 這篇文章主要介紹了常見的瀏覽器兼容性問題(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-02-20
- 這篇文章主要介紹了border-radius IE8兼容處理的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)2020-02-12
- 這篇文章主要介紹了淺談遇到的幾個瀏覽器兼容性問題,詳細(xì)的介紹了幾種我遇到的問題和解決方式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-09-26
- 這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-14
對常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)
這篇文章主要介紹了對常見的css屬性進(jìn)行瀏覽器兼容性總結(jié)(推薦)的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-20