frameset, iframe, frame框架页面出现横向滚动条bug的隐藏方法

最新推荐文章于 2021-03-04 04:26:09 发布

工业互联

最新推荐文章于 2021-03-04 04:26:09 发布

阅读量473

点赞数

分类专栏： Others 文章标签： iframe 框架 xhtml html scroll firefox

Others 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用框架（无论是frameset、frame、iframe）嵌套网页的时候，如果子网页的高度超过了预先设定的高度，会出现滚动条，也就是尺寸溢出，一般来说如果高度超了就出现垂直滚动条，宽度超了就出现水平滚动条，但是在IE6中，只要尺寸大于等于预定高度，就会两个滚动条一起出现，这好象是一个bug。

解决方法：
在子网页设置css如下：

html {
overflow-y:auto!important;
*overflow-y:scroll;
}

这段最重要的一点是设置overflow-y为scroll，这样强制出现垂直滚动条的话，水平滚动条就不会显示出来了，但如果宽度超出过多，水平滚动条还是会超出，这时可以考虑设置:overflow-x:hidden;，但相应的，这样用户就无法滚动子页面了。

之所以要加overflow-y:auto!important;，是因为IE7中已没有这个bug，并且firefox也能认到overflow-y这个据说是IE的私有属性……，所以我们还要把overflow设回来。

主页面加IFRAME SCROLLING="YES"
子页面
程序代码
'让竖条消失:

'让横条消失:

'还要去掉
'子页面里的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
'两个都去掉
<IFRAME scrolling="no">

-----------------------------------------------------------------------------------------------------------

使用dw生成的页面会有下面两句：
<!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>
使用上面的框架时当我们的main.php内容超多屏幕时，横向和竖向都会出现滚动条，对于横向我们的main.php的宽度无论有没有超过mainFrame的宽度都会出现横向滚动条，为了取消横向滚动条我们采用了以下方法：
前提条件是：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解决。

转贴---------------------------------------------------------------------------------------------------

IE下浏览正常的,在firefox下就出现问题了,出现了横向滚动条,不知道该这两者之间有什么区别?

是不是长串的英文连在一起了，需要加一些空格或者换行，ff不会为这样的东西自动换行的

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wcmtu/archive/2009/02/02/3858684.aspx

工业互联

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
frameset, iframe, frame框架页面出现横向滚动条bug的隐藏方法

 使用框架（无论是frameset、frame、iframe）嵌套网页的时候，如果子网页的高度超过了预先设定的高度，会出现滚动条，也就是尺寸溢出，一般来说如果高度超了就出现垂直滚动条，宽度超了就出现水平滚动条，但是在IE6中，只要尺寸大于等于预定高度，就会两个滚动条一起出现，这好象是一个bug。 解决方法： 在子网页设置css如下： html { overflow-y:auto!important; *overflow-y:scroll;<br /
复制链接

扫一扫