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的使用、IE6浏览器的特殊性以及CSS（层叠样式表）和JavaScript（JS）的运用。 首先，iframe（内联框架）...
` - 隐藏横向滚动条。 - `overflow-y: hidden;` - 隐藏纵向滚动条。 例如，如果你想在一个`div`元素中去掉所有滚动条，可以这样写： ```css div { overflow: hidden; } ``` 或者，如果你想单独去掉横向或纵向...
1. 控制横向和纵向滚动条的显隐： 在HTML中，通过设置`<body>`标签的`style`属性，可以控制页面的滚动条行为。例如，`overflow-y:hidden`将隐藏垂直滚动条，只允许水平滚动；`overflow-x:hidden`则隐藏水平滚动条，...
1. **滚动条控制**：通过CSS样式，可以轻松控制网页的横向和纵向滚动条的显示和隐藏。例如，`overflow-y:hidden`用于隐藏垂直滚动条，`overflow-x:hidden`用于隐藏水平滚动条，而`<body scroll="no">`则可以同时去掉...
通过CSS样式`overflow-y`或`overflow-x`属性，可以分别控制页面纵向或横向滚动条的显示与隐藏，优化页面布局。 ### 15. 在FrontPage2000中插入Flash动画 在FrontPage编辑器中，通过菜单操作可以轻松插入Flash动画...
Nicescroll是一个基于jQuery的滚动条插件，它提供了一个美观且功能丰富的自定义滚动条解决方案。该插件几乎支持所有主流浏览器，包括IE6+，并能适用于触摸屏设备，具有很低的侵入性和高兼容性。利用Nicescroll，...
15. **控制滚动条**：使用CSS的`overflow`属性可以控制横向和纵向滚动条的显示与隐藏，如`overflow-y:hidden`去除Y轴滚动条，`overflow-x:hidden`去除X轴滚动条。 以上技巧是网页制作中常见的优化和设计手法，它们...
17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试代码（三） 18.4 多选考试题 18.5 ...
17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试代码（三） 18.4 多选考试题 18.5 ...
6 <br>0015 统一窗体中控件的字体设置 7 <br>0016 通过“格式”菜单布局窗体 7 <br>0017 起始页中的“Visual Studio开发人员新闻” 7 <br>1.3 MSDN帮助的使用 8 <br>0018 有效利用Visual ...
1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper ...