使用框架(無論是frameset、frame、iframe)嵌套網(wǎng)頁的時(shí)候,如果子網(wǎng)頁的高度超過了預(yù)先設(shè)定的高度,會(huì)出現(xiàn)滾動(dòng)條,也就是尺寸溢出,一般來說如果高度超了就出現(xiàn)垂直滾動(dòng)條,寬度超了就出現(xiàn)水平滾動(dòng)條,但是在IE6中,只要尺寸大于等于預(yù)定高度,就會(huì)兩個(gè)滾動(dòng)條一起出現(xiàn),這好象是一個(gè)bug。
解決方法:
在子網(wǎng)頁設(shè)置css如下:
html {
overflow-y:auto!important;
*overflow-y:scroll;
}
這段最重要的一點(diǎn)是設(shè)置overflow-y為scroll,這樣強(qiáng)制出現(xiàn)垂直滾動(dòng)條的話,水平滾動(dòng)條就不會(huì)顯示出來了,但如果寬度超出過多,水平滾動(dòng)條還是會(huì)超出,這時(shí)可以考慮設(shè)置:overflow-x:hidden;,但相應(yīng)的,這樣用戶就無法滾動(dòng)子頁面了。
之所以要加overflow-y:auto!important;,是因?yàn)镮E7中已沒有這個(gè)bug,并且firefox也能認(rèn)到overflow-y這個(gè)據(jù)說是IE的私有屬性……,所以我們還要把overflow設(shè)回來。
主頁面加IFRAME SCROLLING="YES"
子頁面
程序代碼
'讓豎條消失:
<BODY STYLE='OVERFLOW:SCROLL;OVERFLOW-Y:HIDDEN'>
</BODY>
'讓橫條消失:
<BODY STYLE='OVERFLOW:SCROLL;OVERFLOW-X:HIDDEN'>
</BODY>
'還要去掉
'子頁面里的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
'兩個(gè)都去掉
<IFRAME scrolling="no">
-----------------------------------------------------------------------------------------------------------
使用dw生成的頁面會(huì)有下面兩句:
<!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">
如果帶有這兩句的頁面被嵌入到iframe里面,那么overflow-x : hidden ;就不起作用。
-----------------------------------------------------------------------------------------------------------
框架代碼:
<frameset rows="100,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="index.php?cp=top" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
<frameset cols="200,*" frameborder="no" border="0" framespacing="0">
<frame src="index.php?cp=left" name="leftFrame" scrolling="yes" noresize="noresize" id="leftFrame" />
<frame src="main.php" name="mainFrame" id="mainFrame" />
</frameset>
</frameset>
使用上面的框架時(shí)當(dāng)我們的main.php內(nèi)容超多屏幕時(shí),橫向和豎向都會(huì)出現(xiàn)滾動(dòng)條,對(duì)于橫向我們的main.php的寬度無論有沒有超過mainFrame的寬度都會(huì)出現(xiàn)橫向滾動(dòng)條,為了取消橫向滾動(dòng)條我們采用了以下方法:
前提條件是:mainFrame的頁面沒有聲明DTD,即
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
body {
overflow: scroll;
overflow-x: hidden;
overflow-x: auto !important;
}
如果聲明了DTD,可以把body換成html解決。