`
littcai
  • 浏览: 248003 次
  • 性别: Icon_minigender_1
  • 来自: 无锡
社区版块
存档分类
最新评论

ie6下iframe出现水平滚动条的解决办法

阅读更多

问题描述

      页面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">

分享到:
评论

相关推荐

    iframe在IE6下出现横向滚动条的解决方案

    在深入探讨如何解决IE6下iframe出现横向滚动条的问题之前,我们需要了解几个关键的前端技术概念,包括iframe的使用、IE6浏览器的特殊性以及CSS(层叠样式表)和JavaScript(JS)的运用。 首先,iframe(内联框架)...

    javascript经典特效---Iframe页面的滚动.rar

    - 使用CSS可以改变Iframe的外观,例如隐藏默认滚动条,自定义滚动条样式,使用`overflow: hidden;`隐藏滚动条,或者通过`::-webkit-scrollbar`等伪元素定义滚动条样式(仅限Webkit内核浏览器)。 6. **浏览器兼容...

    ASP.NET iframe 的通用用法

    &lt;iframe src="URL" width="宽度" height="高度" frameborder="边框" scrolling="滚动条"&gt; &lt;/iframe&gt; ``` 其中: - **src**: 指定要加载的文档 URL,可以是相对路径也可以是绝对路径。 - **width**: 设置内嵌文档的...

    iframe高度自适应 js

    - **非IE浏览器**:使用`document.documentElement.scrollHeight`获取文档实际高度(包括滚动条)。 - **IE浏览器**:使用`document.body.scrollHeight`获取文档实际高度。 - **高度调整**:调用`parent....

    asp.net iframe的用法

    - `scrolling`: 控制是否显示滚动条,可选值为 `auto`(根据需要自动显示)、`yes`(总是显示)和 `no`(不显示)。 - `src`: 指定要嵌入的页面或资源的URL,建议使用绝对路径以确保正确加载。 - `name`: 为 `...

    CSS浏览器兼容和IE中bug问题

    - **解决方案**:可以尝试使用`overflow-y: auto`来替代`overflow: auto`,以避免水平滚动条的出现。 8. **`iframe`的透明度问题** - **问题描述**:在IE中,`iframe`默认不支持背景透明。 - **解决方案**:可以...

    CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    然而,IE的实现并不完全符合预期,可能会在某些情况下错误地显示水平滚动条。因此,为了避免这个问题,可以选择明确设置`scrolling="yes"`,尤其是在你知道内容可能只会垂直溢出的情况下。 总结一下,要实现只上下...

    自适应窗口大小,兼容各浏览器

    自适应窗口大小,兼容各浏览器,高度没有被限制,不会出现水平滚动条哦

    Dreamweaver代码

    例如,`overflow-y:hidden`隐藏垂直滚动条,`overflow-x:hidden`隐藏水平滚动条,而`scroll="no"`则同时隐藏两者。 2. **表格颜色变化**: 使用JavaScript事件处理程序可以实现表格单元格(`&lt;TD&gt;`)的背景色变化。当...

    50条网页制作小技巧集锦.pdf

    例如,`overflow-y:hidden`用于隐藏垂直滚动条,`overflow-x:hidden`用于隐藏水平滚动条,而`&lt;body scroll="no"&gt;`则可以同时去掉两者。 2. **表格交互效果**:通过JavaScript事件处理,可以实现表格单元格(TD)的...

    Dreamwear设计常用代码 1-6.docx

    `overflow-x:hidden`则隐藏水平滚动条,只显示垂直滚动;而`scrollbar=no`则完全禁止页面滚动。 2. 表格单元格(TD)变色: 如果你想让表格的某个单元格(TD)具有特定的鼠标交互效果,比如鼠标悬停时变色,可以...

    artDialog_Demo

    10、修复Chrome特定情况下出现的iframe错位问题 11、修正2.0.8版本后锁屏不兼容Safari的问题 12、修复Firefox调大对话框拖帧的现象 13、修复拖动对话框时候可能因鼠标置入iframe窗口而导致鼠标被粘住的问题 14...

    dreamweaver常用代码全攻略.doc

    - `&lt;body style="overflow-x:hidden"&gt;` 用于隐藏水平滚动条,即x轴。 - `&lt;body scroll="no"&gt;` 用于同时隐藏水平和垂直滚动条。 2. **表格颜色变换**: - 在表格单元格`&lt;TD&gt;`中使用`style="CURSOR: hand"`可以...

    html技巧代码

    - `overflow-x:hidden`:隐藏水平滚动条,保留垂直滚动。 - `scroll="no"`:在`&lt;body&gt;`标签中使用此属性可禁止任何方向的滚动条显示。 2. **表格单元格(TD)的交互效果**: - 使用`onmouseover`和`onmouseout`...

    ASP.NET网页设计的24条小技巧

    -- 隐藏水平滚动条 --&gt; &lt;body scroll="no"&gt; &lt;!-- 隐藏所有滚动条 --&gt; ``` #### 技巧15:集成Flash文件 使用FrontPage2000等工具可以轻松将Flash文件集成到网页中: 1. 打开FrontPage2000; 2. 选择“插入”菜单下的...

    Dreamweaver网站制作笔记

    14. **控制滚动条显隐**:通过在`&lt;body&gt;`标签中设置`style`属性,如`overflow-y:hidden`或`overflow-x:hidden`可控制垂直或水平滚动条的显示,`scroll="no"`则可以隐藏所有滚动条。 15. **在FrontPage2000中插入...

    网页制作经典技巧24条

    7. **隐藏IFRAME滚动条**:有三种方法:(1)设置`scrolling="no"`;(2)在被包含页的`&lt;body&gt;`应用`overflow:hidden`;(3)在被包含页的`&lt;body&gt;`标签添加`scroll="no"`。 8. **添加背景音乐**:对于IE浏览器,使用`...

    Html代码编写技巧

    - **去除水平滚动条**:`&lt;body style="overflow-x:hidden"&gt;` - **禁止所有滚动条**:`&lt;body scroll="no"&gt;` #### 2. 鼠标悬停时改变背景颜色 可以通过设置`&lt;TD&gt;`标签的`onmouseover`和`onmouseout`事件来实现鼠标...

    HTML的一些小技巧

    **说明**:这些技巧可用于隐藏IFRAME内部的滚动条,使IFRAME内容与外部页面布局更加一致。 #### 8. 播放背景音乐 ```html [1].mid" loop="-1"&gt; ``` ```html ``` **说明**:第一种方法适用于IE浏览器,第二种适用...

Global site tag (gtag.js) - Google Analytics