问题描述
页面A中通过IFRAME引入另一个页面B,并设置scrolling="auto"。当B页面的内容超过IFRAME的高度时,会自动出现滚动条;然而在IE6下,除了出现纵向滚动条外还会出现横向滚动条(即时设置了B页面的宽度为100%)。
注:问题只出现在IE6下,IE7,FIREFOX,CHROME下无此问题
问题原因
原因是IFRAME在加载页面时,首先会根据自己的宽度来加载页面(如IFRAME宽为600px,则加载的页面B的宽度也为600px),然后由于B的高度超出了IFRAME的高度,由IFRAME生成滚动条,由于生成了纵向滚动条,IFRAME的实际内容宽度将减少;而页面B的宽度仍为600px,最终产生横向滚动条。
问题解决
- 方法1:
设置scrolling="yes",并且增加style="overflow-x: hidden"
- 方法2:
将DOCTYPE 换成如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">