使用框架framset在IE6出现横向滚动条的解决方法

彻底解决框架framset在IE6出现横向滚动条的烦恼，这阵子给客户做一个案例的时候，利用主框架不刷新的特点，实现音乐不间断的播放，调用的主页面是1006px在1024*768的分辨率本应该是全屏显示的，但是遗憾的是在IE6下面根本是不是这样的，本来应该只有竖的滚动条，但是使用了FRAMESET框架集以后，在页面没有超出的时候，横向的滚动条也出现了，似乎只要有任意的一边超出以后，都会出现两个滚动条。

   在发现页面有两个滚动条以后，我使用了一个overflow-x:hidden;  这样的CSS样式隐藏了页面的横向滚动，我认为问题以及解决了。结果不是的。当我使用body{width:1006px;margin:0 auto;}让整体的页面居中的时候，我发现事情并不是我想象的那样，在IE6下面测试，页面并没有居中，而是靠右可一些15像素。但是，如果网页不居中的话，就不会有这样的现象，客户要求网页要居中，所以没有办法，怎么办呢？

   我尝试将body的宽度改宽一点，写成1004px，这样的话，在视觉上似乎解决了页面靠右的问题，但是，我用鼠标将字选中后往右拖动的时候，发现页面居然往又去了15px;虽然说不会有浏览者故意往由拖动，但是我觉得这样很不爽。在网上找了许多资料，还是没有收获，下午我不小心翻阅IE6 BUG修复的文章时，发现有这样的一条，在IE6下，如果使用FRAME之类的框架，只要有一边超出以后就会同时出现两个滚动条，横向的滚动条和竖向的滚动条。这是IE的BUG之一。

  原来，并不是我的错，是IE的错！郁闷，也怪自己平时积累太少，我对FRAME之类的框架属性根本就一无所知，感觉框架是非常难理解的东西，再说，框架做的网站对搜索引擎很不友好，所以一般给客户做网站的时候都很少用到这个东西。偏偏这个客户做的网站是观赏性的，也根本不用考虑这些东西。

  讲了这么多，关于IE6下框架出现横向滚动的解决方法有吗？下面是我搜集的一些方法。

解决方案一：给内页加上样式：html { overflow-y: scroll; }

当内页大于frame的高度时，仅出现纵向滚动条，效果正确。 当内页高度小于frame的高度时纵向滚动条仍然显示（不可用状态）。这会强制默认出现垂直滚动条, 这样一来, 从某些理由上来讲, 便消去了IE对水平滚动条的需求。完全解决了这个问题, 允许你保持完整的XHTML doctype。

解决方案二：给内页加上样式：html { overflow-x: hidden; overflow-y: auto; } 当内页的高度大于frame的高度时仅出现纵向滚动条，但右边内容显示不完全。效果不正确。 当内页的高度小于iframe的高度时没有滚动条出现，效果正确。这种做法的优点是在视觉上解决了这个问题，在不必要的时候，没有强制垂直滚动条出现。缺点是：只是简单地隐藏了水平滚动条而已, 并未真正修复这个问题。这样一来，你可能会遇到真的需要有位于当前页面之外的内容而需要水平滚动条的时候，但是它已经被强制隐藏了。

解决方案三：给内页加上样式：body {margin-right: -15px;margin-bottom: -15px;} 这会在margin的水平和垂直方向上添加一个负值，IE添加了该精确数值后，便会去除对滚动条的需求假象。这种做法的优点是：在视觉上解决了这个问题，未强制垂直滚动条出现。缺点是：由于“人为创建”了15px的外边距(margin)，所以无法使用该填充过的屏幕区域。

解决方案四：纯css解决不 了，我们只好搬出js来了，我们的js有如下思路：当浏览器为IE6且内容高度比iframe高时给html标签加入方案一的样式。

$(function(){

if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("html").height()) $("html").css("overflowY","scroll");

});

解决方案五：既然只有IE6有这样的现象的话，可以考虑使用HACK语句针对IE6来修复这个问题。在子网页设置css如下：

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

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

  既然只有IE6有这个BUG那就只针对IE6写就行了

html {_overflow-y:scroll;}

_下划线是IE6专有的 这样就又省了一行代码 又提高了效率。

   看了这么多方法，你可以根据自己的情况选择一种适合自己的方法，相信，横向滚动条的烦恼是可以彻底解决的！

评论

1 楼 msongli 2011-11-23  

[img][/img]