IFRAME相关,各浏览器中 IFRAME 元素的 scrolling 属性与其子页面 HTML 与 BODY 元素 'overflow' 特性的制约关系有差异
2011-12-12 21:36
676 查看
转载:http://www.w3help.org/zh-cn/causes/RX9009
auto:默认值,告诉用户端在必要时为框架窗口提供滚动设备;
yes:告诉用户端始终为框架窗口提供滚动设备;
no:告诉用户端不为框架窗口提供滚动设备。
然而规范中并没有说明此属性与框架引入的子页面中的 HTML 元素或是 BODY 元素通过 CSS 的 'overflow' 特性生成的滚动条之间的制约关系。
关于 scrolling 属性的详细信息,请参考 HTML4.01 规范 16.2.2 The FRAME element 中的内容。
在 Chrome Safari 中,虽然 IFRAME 元素的 scrolling 属性为 "no",但若其子页面的 HTML 或 BODY 元素的 'overflow' 特性为 'scroll',则 IFRAME 仍会被渲染上滚动条。
分析以下代码:
parent_scroll.html
sub1.htm
sub2.htm
主页面中包含两组共四个 IFRAME 元素,每组内 scrolling 属性值分别为 "yes"、"no"。子页面 sub1.htm 中的 HTML 与 BODY 元素的 'overflow' 特性均为 'scroll'。子页面 sub2.htm 中的 BODY 元素的 'overflow' 特性为 'scroll'。对于 IE6(Q) IE7(Q) IE8(Q) 混杂模式的根元素不是 HTML 造成的特殊效果这里不再分析。
在各浏览器中效果如下:
在分析上面一组截图前,先在各浏览器下单独运行 sub2.htm,可知:
在 IE7(S)中,HTML 元素的 'overflow' 特性默认值为 'scroll',所以默认即会出现页面滚动条。BODY 元素的"overflow:scroll" 生成的滚动条与页面滚动条无关;
在 IE8(S) Firefox Chrome Safari Opera 中,在 HTML 元素的 'overflow' 特性为 'visible' 时,BODY 元素的 "overflow:scroll" 生成的滚动条即作为页面的滚动条。
回到上面的测试代码,可见:
在 IE8(S) Firefox Opera中,scrolling 属性为 "no" 会干扰其子页面的页面滚动条的生成,即使 HTML 元素的 'overflow' 特性失效,或 HTML 元素 overflow:visible 时 BODY 元素的 'overflow' 特性失效;
在 IE7(S)中,虽视觉效果与上面的浏览器有区别,但 scrolling 属性的干扰效果一致,只是仅仅使 HTML 元素的 'overflow' 特性失效;
在 Chrome Safari 中,scrolling 属性为 "no" 不会对子页面中 HTML 及 BODY 元素的 'overflow' 特性有影响。
下面继续观察子页面 HTML 与 BODY 元素为 "overflow:hidden" 时的情况。
分析以下代码:
parent_hidden.html
sub.htm
主页面 IFRAME 元素的 scrolling 属性值为 "yes"。子页面的 HTML 与 BODY 元素的 'overflow' 特性分别为 'hidden' 与 'scroll'。
在各浏览器中效果如下:
仍然忽略 IE6 IE7 中的特殊现象,仅从 scrolling 属性对滚动条的影响上看,
在 IE Chrome Safari中,虽然 IFRAME 的 scrolling 属性值为 "yes",但是子页面 HTML 元素的 "overflow:hidden" 使 IFRAME 的滚动条消失;
在 Firefox Opera 中,由 IFRAME 的 scrolling 属性生成的子页面滚动条并没有受到 HTML 元素的 "overflow:hidden" 的影响。
总结:
在 Chrome Safari中,IFRAME 元素的 scrolling 属性仅影响其引入子页面的 HTML 元素 'overflow' 为 'visible',或者 HTML 与 BODY 元素 'overflow' 均为 'visible' 时的子页面滚动条。若为子页面 HTML 与 BODY 元素单独设置其 'overflow' 特性,则会很容易地打破 scrolling 属性对子页面滚动条的约束。
在 Firefox Opera中,IFRAME 元素的 scrolling 属性会影响其引入子页面的 HTML 元素 'overflow' 特性,以及 HTML 元素 'overflow' 为 'visible' 时 BODY 元素的 'overflow' 特性,若为子页面 HTML 与 BODY 元素单独设置其 'overflow' 特性,则不会破坏由 scrolling 属性生成及隐藏的子页面滚动条。
在 IE 中当子页面的 HTML 元素 'overflow' 为 'hidden' 时,则表现得类似 Chrome 中的情况。当其 'overflow' 为其他值时,则表现得类似 Firefox 中的情况。
标准参考
根据 HTML4.01 规范中的描述,FRAME 元素与 IFRAME 元素拥有一个特殊的属性 "scrolling",这个属性为框架窗口指定滚动信息,可能值:auto:默认值,告诉用户端在必要时为框架窗口提供滚动设备;
yes:告诉用户端始终为框架窗口提供滚动设备;
no:告诉用户端不为框架窗口提供滚动设备。
然而规范中并没有说明此属性与框架引入的子页面中的 HTML 元素或是 BODY 元素通过 CSS 的 'overflow' 特性生成的滚动条之间的制约关系。
关于 scrolling 属性的详细信息,请参考 HTML4.01 规范 16.2.2 The FRAME element 中的内容。
问题描述
在 IE Chrome Safari 中,IFRAME 元素引入的子页面 HTML 元素的 "overflow:hidden" 会使 IFRAME 元素的 scrolling 属性失效,IFRAME 元素不会出现滚动条。在 Chrome Safari 中,虽然 IFRAME 元素的 scrolling 属性为 "no",但若其子页面的 HTML 或 BODY 元素的 'overflow' 特性为 'scroll',则 IFRAME 仍会被渲染上滚动条。
造成的影响
各浏览器 IFRAME 元素的 scrolling 属性与其子页面 HTML 与 BODY 元素 'overflow' 特性的制约关系上的差异,可能造成子页面滚动条的渲染差异。受影响的浏览器
所有浏览器 |
---|
问题分析
首先观察子页面 HTML 与 BODY 元素为 "overflow:scroll" 时的情况。分析以下代码:
parent_scroll.html
<!DOCTYPE html> <iframe src="sub1.htm" scrolling="yes" style="width:80px; height:80px;"></iframe> <iframe src="sub1.htm" scrolling="no" style="width:80px; height:80px;"></iframe> <br /> <iframe src="sub2.htm" scrolling="yes" style="width:80px; height:80px;"></iframe> <iframe src="sub2.htm" scrolling="no" style="width:80px; height:80px;"></iframe>
sub1.htm
<!DOCTYPE html> <html style="overflow:scroll; border:2px solid red;"> <body style="overflow:scroll; border:2px solid gold; margin:0; width:50px; height:50px;"> </body> </html>
sub2.htm
<!DOCTYPE html> <html style="border:2px solid red;"> <body style="overflow:scroll; border:2px solid gold; margin:0; width:50px; height:50px;"> </body> </html>
主页面中包含两组共四个 IFRAME 元素,每组内 scrolling 属性值分别为 "yes"、"no"。子页面 sub1.htm 中的 HTML 与 BODY 元素的 'overflow' 特性均为 'scroll'。子页面 sub2.htm 中的 BODY 元素的 'overflow' 特性为 'scroll'。对于 IE6(Q) IE7(Q) IE8(Q) 混杂模式的根元素不是 HTML 造成的特殊效果这里不再分析。
在各浏览器中效果如下:
IE7(S) | IE8(S) Firefox Opera | Chrome Safari |
---|---|---|
在 IE7(S)中,HTML 元素的 'overflow' 特性默认值为 'scroll',所以默认即会出现页面滚动条。BODY 元素的"overflow:scroll" 生成的滚动条与页面滚动条无关;
在 IE8(S) Firefox Chrome Safari Opera 中,在 HTML 元素的 'overflow' 特性为 'visible' 时,BODY 元素的 "overflow:scroll" 生成的滚动条即作为页面的滚动条。
回到上面的测试代码,可见:
在 IE8(S) Firefox Opera中,scrolling 属性为 "no" 会干扰其子页面的页面滚动条的生成,即使 HTML 元素的 'overflow' 特性失效,或 HTML 元素 overflow:visible 时 BODY 元素的 'overflow' 特性失效;
在 IE7(S)中,虽视觉效果与上面的浏览器有区别,但 scrolling 属性的干扰效果一致,只是仅仅使 HTML 元素的 'overflow' 特性失效;
在 Chrome Safari 中,scrolling 属性为 "no" 不会对子页面中 HTML 及 BODY 元素的 'overflow' 特性有影响。
下面继续观察子页面 HTML 与 BODY 元素为 "overflow:hidden" 时的情况。
分析以下代码:
parent_hidden.html
<!DOCTYPE html> <iframe src="sub.htm" scrolling="yes" style="width:80px; height:80px;"></iframe>
sub.htm
<!DOCTYPE html> <html style="overflow:hidden; border:2px solid red;"> <body style="overflow:scroll; border:2px solid gold; margin:0; width:50px; height:50px;"> </body> </html>
主页面 IFRAME 元素的 scrolling 属性值为 "yes"。子页面的 HTML 与 BODY 元素的 'overflow' 特性分别为 'hidden' 与 'scroll'。
在各浏览器中效果如下:
IE7(S) | IE8(S) Firefox Opera | Chrome Safari |
---|---|---|
在 IE Chrome Safari中,虽然 IFRAME 的 scrolling 属性值为 "yes",但是子页面 HTML 元素的 "overflow:hidden" 使 IFRAME 的滚动条消失;
在 Firefox Opera 中,由 IFRAME 的 scrolling 属性生成的子页面滚动条并没有受到 HTML 元素的 "overflow:hidden" 的影响。
总结:
在 Chrome Safari中,IFRAME 元素的 scrolling 属性仅影响其引入子页面的 HTML 元素 'overflow' 为 'visible',或者 HTML 与 BODY 元素 'overflow' 均为 'visible' 时的子页面滚动条。若为子页面 HTML 与 BODY 元素单独设置其 'overflow' 特性,则会很容易地打破 scrolling 属性对子页面滚动条的约束。
在 Firefox Opera中,IFRAME 元素的 scrolling 属性会影响其引入子页面的 HTML 元素 'overflow' 特性,以及 HTML 元素 'overflow' 为 'visible' 时 BODY 元素的 'overflow' 特性,若为子页面 HTML 与 BODY 元素单独设置其 'overflow' 特性,则不会破坏由 scrolling 属性生成及隐藏的子页面滚动条。
在 IE 中当子页面的 HTML 元素 'overflow' 为 'hidden' 时,则表现得类似 Chrome 中的情况。当其 'overflow' 为其他值时,则表现得类似 Firefox 中的情况。
解决方案
W3C 规范并没有说明 scrolling 属性应该控制子页面哪个元素的滚动条的生成或者 'overflow' 特性,为防止在某些情况下 Chrome Safari 的 IFRAME 子页面中出现多余滚动条,应避免为 HTML 或者 BODY 元素设置 overflow:scroll。参见
知识库
...相关问题
...测试环境
操作系统版本: | Windows 7 Ultimate build 7600 |
---|---|
浏览器版本: | IE6 IE7 IE8 Firefox 3.6.2 Chrome 5.0.360.0 dev Safari 4.0.5 Opera 10.51 |
测试页面: | parent_scroll.html parent_hidden.html |
本文更新时间: | 2010-06-24 |
相关文章推荐
- 各浏览器中 IFRAME 元素的 scrolling 属性与其子页面 HTML 与 BODY 元素 'overflow' 特性的制约关系有差异
- 为Html页面设置背景——通过设置body结构标签和CSS指定背景属性实现
- 如果父元素都没有设有移动定位属性,则元素会参照 <html>来定位,而不是<body>,IE、FF都如此
- 记不住就存下来---- HTML 5 新增常用属性 之 语法相关元素
- A.html页面中嵌套iframe,iframe中嵌套B.html,问从A页面获取B页面中某元素或某元素的值?
- 工作总结 @Html 辅助方法 为 生成的 标签设置元素属性 htmlAttributes 一个对象,其中包含要为该元素设置的 HTML 特性。
- iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片
- HTML select 元素 disabled 属性在主流浏览器中的表现
- html框架之iframe和frame及frameset的相关属性介绍
- iframe中的html页面用 js 改变包含此页面的iframe的属性
- Html与body页面关系
- [html&css]Pass Through - 41.HTML 使用负值设置页面元素的margin属性
- 使用jquery修改当前页面所在Iframe的相关属性
- js来获取嵌套的子页面iframe里面的html和form表单中元素值
- html 当中相关标签,元素,属性的缩写
- 获取iframe中的内容、查找获取指定元素(关于用c++调用WEBBROWSER控件,使用相关接口操作web页面元素的一些方法)
- html页面中meta标签你不知道 的秘密——meta用法以及相关属性
- jquery寻找html页面iframe标签引入的页面元素
- HTML页面中input元素在android浏览器中获得焦点后页面放大解决方法
- HTML学习笔记(五)_HTML5表单相关元素和属性