iframe 在ie 6 下的bug

星期五 08月 8thcss&html, 工作杂记, 工作研究 Category

概要

iframe这个东西让人又爱又恨。有很多好处,比如跨域通讯,一定要这东西。再比如嵌套某些页面,业务需求要这样做,没这个东西还真会提高系统的复杂度

在wui项目中,大量使用了iframe,无意中遇到一个iframe 的bug。

兼容性:

ie 6 only

表现:

iframe在ie 6中载入时候,如果载入页面body高度大于iframe高度,会出现一个横向的滚动条。

原因:

页面宽度等于viewprot的宽度+scroll的宽度。假设iframe宽度是400px,页面宽度是100%,载入页面时,宽度应该是400px;当页面高度不高于iframe高度时候,没有任何问题。但是当页面高度高于iframe高度时,正确的计算应该是400px-scroll宽度。但ie 6的计算任然是400px,由于页面多出来了一个滚动条的宽度,就导致在iframe中出现了横向滚动条。

解决办法

在网上搜索到的解决办法有如下几种:

1) Set the body style of the page that appears within the iframe to: display: inline; (<body style="display: inline"> or use a style sheet or set the style in the header) The reason this works is because it forces the body with to be only as wide as its content.

2) Set the doctype of the page that appears within the iframe to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> (leave out the link to the dtd)

3) in the iframe tag, set the attribute: scrolling="yes" (This will cause the vertical scrollbar to always be present, but the horizontal scrollbar will appear only when necessary. The reason this works is because in this situation, IE allots space for the vertical scrollbar before setting the width of the included body.)

4)best: html {   overflow-x: hidden; }

 

可是1,2我测试无法实现。

3,4虽然可以ok,但是会导致页面万一需要出现横向滚动条的时候,导致有可用性方面的问题。

最后我的解决:

用脚本来判定是否会出现纵向滚动条。如果出现,则修改body或者相应div的宽度,用它减去浏览器滚动条宽度+2px。

重要的是能够知道是什么导致横向滚动条的出现。找到了原因就可以有很多的解决办法了。

在wui项目中,总结到的是:

比如100%的高度适应,某些特殊的100%下的宽度适应,一些css只能在ie7,ff上有效果,在ie6上没有效果。这样的情况直接选择用脚本来判断修正,会比单纯使用css来做更好。但相应的,也有很多效果,是可以直接用css来实现的。这个就是一个经验问题

1 Comments

  1. cosa
    08月 15, 2008

    貌似第四种方法会导致IE7下鼠标中键无效……

Leave a comment

Size

Colors