YOYO的最新BLOG文章

Mar
10

去掉框架横向滚动条的问题困扰了我很久了,一直都没有找到很妥善的办法来解决,网络上也是莫衷一是,没有一个完全正确的,而今天我终于解决了,这主要应该感谢SkyClan,他那一篇去掉横向滚动条的文章写的很棒,只是有点小小的错误,我在下面会提到。

框架代码:

<frameset id="frame" rows="*,80" frameborder="no" border="0" framespacing="0">
 
<frame src="content.html" name="mainFrame" id="mainFrame" scrolling="Auto"
 
noresize="noresize" title="mainFrame" />
 
<frame src="bottom.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="bottomFrame" />
</frameset>

这段代码在Firefox下面是正常的,但是在IE上运行总是有一个横向的滚动条,特别烦人。而你把mainFrame里面的scrolling设置为yes之后,IE是好了,而Firefox里面就出问题了,所以我首先考虑到的是用javascript解决,但是最终是失败的,而我代码是没有问题的,所以我也不知道为什么会是失败的。

这里还有一个办法,如果你的框架是用于动态网站上的话,你可以通过动态语言来控制在不同的浏览器下面现实不同的scrolling的值,不过不是动态网站的话就没办法了,继续往下看吧。

在用CSS来解决的时候,Skyclan给出的办法是在mainFrame的文件中(content.html)另外加一段CSS,如下:

body {
overflow: scroll;
overflow-x: hidden;
overflow-x: auto !important;
}

而我测试的结果是失败的,而我把上面的CSS样式中的body{…}改为htm{…}却成功了。经过我的反复测试得出的结论是只有在不声明DTD的时候body{…}和html{…}才是都可以的,声明了DTD的情况下,只有html{…}是可以的

通过上面的方法,丑陋的横向滚动条终于没有了,最后还是要再次感谢SkyClan。

Tags: , ,
Posted in HTML | CSS