IE6中iframe出现横向滚动条的解决方案

IE6中iframe出现横向滚动条的解决方案

方案一：给该框架的页内加上以下样式

html{ overflow-x:hidden; overflow-y:auto;}

注意，是指该框架的页内添加，不是在全局的样式中添加。这种方案是网上给出的最多的方案，横向超出就隐藏，纵向超出让他自动。这样IE6下横向滚动条确实是没有了，可是这样我们会发现内容盒子的右边会缺失了17px的宽度，为什么？这是因为overflow-x:hidden隐藏掉的是内容盒子里原横向右边的宽度，也就是等于滚动条的宽度。
所以，方案一是一种不完美的解决方案。

方案二：给该框架的页内加上以下样式

html { overflow-y:scroll;}

注意，这也是指该框架的页内添加，不是在全局的样式中添加。这种方案比第一种好，横向滚动条消失了，内容盒子的宽度也没有被隐藏掉，即没有减少。但是你再细心点就会发现，这时无论是什么时候纵向都会预留有滚动条的位置，当框架里内容很长，需要纵向滚动条的时候，显示会正常；但是当框架里内容很少，根本不需要纵滚动条的的时候，它也会出现一条灰色的滚动条框。

我想这也不是我们想要的最终效果。

方案三：使用jQ解决

既然我们用CSS样式都不能完美解决我们的问题，那就只有动用同样强大的jQ了：

$(function () {
    //解决IE6下 iframe出现横向滚动条
    if ($.browser.msie && $.browser.version == "6.0" && $("html")[0].scrollHeight > $("html").height())
        $("html").css("overflowY", "scroll");
})

 

这种方案的解决思路是用jQ进行判断，当当前的浏览器是IE6时，并且灰色滚动条框大于frame/iframe框架高度的时候就应用方案二，否则将不采取任何措施

转载于:https://www.cnblogs.com/everyone/archive/2013/04/15/3021988.html