iframe在IE6下出現横向翻转条的处理计划方案

日期:2021-03-22 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

状况以下:(PS:红框表明iframe的地区,灰色的长方框表明上面提到的width:100%的元素,必须在IE6下看实际效果。)
当灰色的框的高宽比超过iframe的高宽比时出現横纵向翻转条(IE6下)。

当灰色的框的高宽比小于iframe的高宽比时效性果一切正常。

处理计划方案1:给内页再加款式:html { overflow-y: scroll; }
当灰色的框的高宽比超过iframe的高宽比时仅出現纵向翻转条,实际效果正确。

当灰色的框的高宽比小于iframe的高宽比时纵向翻转条依然显示信息(不能用情况),有缺陷。

处理计划方案2:给内页再加款式:html { overflow-x: hidden; overflow-y: auto; }
当灰色的框的高宽比超过iframe的高宽比时仅出現纵向翻转条,但右侧內容显示信息不彻底(PS:里边文本內容是“这是个高为200px的div”),实际效果有误。

当灰色的框的高宽比小于iframe的高宽比时沒有翻转条出現,实际效果正确。


处理计划方案3:历经了数次尝试依然沒有发现纯css的完善处理计划方案,而大家追求完美的是最完善的实际效果。既然纯css处理不 了,大家只好搬出js来了,根据前面的检测大家发现灰色框高宽比小于iframe的高宽比时不必须做任何解决实际效果正确,而灰色框高宽比超过iframe的高宽比时 计划方案1是完善的。因而,大家的js有以下思路:当访问器为IE6且內容高宽比比iframe高时给html标识添加计划方案1的款式。下面是jQuery的代 码:(无需jQuery的话思路1样。)

拷贝编码
编码以下:

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

当灰色的框的高宽比超过iframe的高宽比时仅出現纵向翻转条,实际效果正确。
当灰色的框的高宽比小于iframe的高宽比时效性果正确。
学会高兴每天(: