iframe載入頁面iE6相容問題

來源:互聯網
上載者:User

ie6下不載入 iframe,用下面的方法調試好了。

特此記錄!!

將子頁面的表頭去掉

然後將子頁面的寬度調整和父頁面一樣大小

 

 

下面是在網上找到的一些線索: 
XHTML 1.0 Transitional 標準不能顯示
 
<!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">
 
父頁面:修改為
HTML 4.01 Transitional 標準
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
子頁面不要表頭
 
****** 去掉 iframe 橫向捲軸或豎條
 
1. 在首頁面加 iframe scrolling="yes" 或 "auto"
 
2. css 檔案
 
body {
     overflow-x : hidden;   去掉橫條
     overflow-y : hidden;   去掉豎條
}
 
父頁面和子頁面連結入 css 檔案
 
3. 去掉子頁面裡的
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
(即不要表頭)
 
4. 兩個都去掉
<iframe scrolling="no">
 
********************************************** 
GOOGLE到一些有用的資料: 
 
[DIV+CSS]XHTML下的捲軸問題 
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和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), 所以無法使用該填充過的螢幕地區.  
    
 
附:強制的捲軸: 
 
問題中的"修複"該bug的技術, 同樣可以用於其它目的. 利用CSS, 你可以有效地在Mozilla Firefox和Internet Explorer中顯示或者隱藏垂直及水平捲軸. 
 
強制顯示捲軸: 
 
html { overflow: scroll; } 
 
強制隱藏捲軸: 
 
html { overflow: hidden; } 
 
隱藏IE的水平捲軸: 
 
html { overflow-x: hidden; } 
 
隱藏IE的垂直捲軸: 
 
html { overflow-y: hidden; } 
 
強制顯示IE的水平捲軸: 
 
html { overflow-x: scroll; } 
 
強制顯示IE的垂直捲軸: 
 
html { overflow-y: scroll; } 
 
強制顯示Mozilla的水平捲軸: 
 
html { overflow:-moz-scrollbars-horizontal; } 
 
注意: 僅僅強制顯示水平捲軸. 也就是說, 即使需要顯示垂直捲軸時, 垂直捲軸也不會出現. 
 
強制顯示Mozilla的垂直捲軸: 
 
html { overflow:-moz-scrollbars-vertical; } 
 
注意: 僅僅強制顯示垂直捲軸. 也就是說, 即使需要顯示水平捲軸時, 水平捲軸也不會出現. 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.