IE'S MOMENTARY LAPSE OF REASON:
The reason this occurs is because when you set the width of the iframe, the body of the included page inherits that width. So if the iframe has its width set to 400px, the body of the included page has its width set to 400px. This is not a problem unless the height of the page is greater than the height of the iframe. Then, the iframe takes up some of the width to use for the vertical scrollbar. So, the iframe has a width of 400px, but the width of the display box is only about 385px because the vertical scrollbar takes up about 15px. However, the body of the included page is still 400px - even if the included page's content only has a width of 1px. So, you end up with a horizontal scrollbar. Other browsers set the width of the body to the width of the viewable space. IE is retarded.
THE WORKAROUNDS:
There are three ways to get rid of the unnecessary horizontal scrollbar in IE (you only have to do one of the three):
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.)
best: html { overflow-x: hidden; }
分享到:
相关推荐
最近的项目中,遇到ie6下当iframe出现纵向滚动条时同时会出现横向滚动条。分析了代码,大致的原因是iframe中的页面有相对body的样式包含width:100%的元素。
iframe的滚动条问题:显示隐藏滚动条.doc
外部滚动条控制iframe外部滚动条控制iframe
主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下
在iframe中隐藏横向滚动条的方法大全
完全搞定iframe(框架)里的滚动条!.doc
iframe水平滚动条定位右侧及其样式的基本设置
iframe内部html的滚动条不出现。并且活生生的从500px处截断,(类似overflow:hidden的效果)下面的内容不再显示。 问题重现: 结构: index.html : <style> #iframe{height:500px;} </style> ...
js脚本: 自动调节iframe高度,而不显示其滚动条
如下所示: function newcont(url) { var index = layer.open({ ...以上这篇layer弹出层 iframe层去掉滚动条的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧! iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下...
NULL 博文链接:https://fengbin2005.iteye.com/blog/1911553
Iframe页面的滚动.rar
iframe.name = 'ifr'; //iframe.setAttribute('name', 'ifr'); //这样也不行 上面两种方式都无法设置。后来找到原来也可以这样创建 JavaScript代码 var iframe = document.createElement(‘<iframe name
滚东条样式设置 不兼容火狐 可修改浏览器默认的滚动条 属用内核修改
滚动的iframe页面.rar滚动的iframe页面.rar滚动的iframe页面.rar滚动的iframe页面.rar滚动的iframe页面.rar滚动的iframe页面.rar
jbox停止更新后,高版本浏览器下有一些问题,调整了在新版本浏览器下,调用 iframe页面出现滚动条,以及弹出层下方未对齐等问题。不过,技术有限,改的不是很正规。只是用来应急,旧系统已经使用的情况下,可以试试...
Jquery 操作页面中iframe自动跟随窗口大小变化,而不出现滚动条,只在iframe内部出滚动条
页面域关系: 主页面a.html所属域A:www.jb51.net 被iframe的页面b.html所属域B:www.baidu.com,假设地址:http://www.baidu.com/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b....