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

iframe中背景图片设为no-repeat引发的异常

阅读更多

问题:

页面中嵌入一个IFRAME的弹出层效果,docType为xhtml1-transitional,此时若为BODY设置了背景图片,且设置了background-repeat属性,在使用滚动条的情况下将出现显示异常,内容会出现残留覆盖。如下图所示:

 

原因:

未知...

解决办法:

  1. 去掉网页的DOCTYPE属性
  2. 不使用background-repeat属性
  3. 将背景样式设置到html对象上(滚动条好像也必须要这样)  --- 本人认为最优方案
  • 大小: 5.1 KB
分享到:
评论

相关推荐

    draw.io-23.1.5-windows-no-installer.exe

    drawio 是完全免费开源软件,主界面很简洁,功能媲美Visio和亿图,完全可以替代收费软件!...drawio 也能嵌入到其他的应用程序中,比如以图片、HTML、IFrame、Google Docs 插件的方式供其他软件使用。

    HTML iframe设置背景透明

    这篇博客将探讨如何设置`iframe`的背景透明,以及相关的一些技术细节。 首先,我们需要理解`iframe`的基本结构。`iframe`标签在HTML中是这样定义的: ```html <iframe src=...

    iframe 框架透明背景

    "iframe框架透明背景"这个主题涉及到如何在`iframe`中设置背景为透明,以便于它与父页面更好地融合,营造出如同支付宝首页那样的视觉效果。 首先,我们需要了解`iframe`的基本语法。`iframe`标签在HTML中是这样写的...

    iframe-resizer-react:Iframe-Resizer的官方React界面

    它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame的高度和宽度调整为内容大小。 适用于多个和嵌套的iFrame。 跨域iFrame的域身份验证。 提供多种页面大小计算方法,以支持复杂CSS布局。 ...

    iframe-resizer-master.rar

    在父页面和`iframe`中分别设置接收和发送消息的函数,就可以实现跨域的数据交换,从而解决了高度自适应所需的信息传递。 在实际应用中,`iframe-resizer-master`通常适用于以下场景: 1. 内容聚合:当网站需要集成...

    解决iframe中fixed失效的问题

    - 将 `iframe` 的 `scrolling` 属性设置为 `no`,然后在外部容器上实现滚动,这样 `fixed` 元素就可以相对于整个页面定位。 4. **使用Vue、React等前端框架**: - 如果你在使用现代前端框架如Vue或React,它们...

    vue-quill-editor视频上传,图片上传到服务器模块,用video标签替换iframe

    quill视频上传,图片上传到服务器模块,用video标签替换iframe 安装教程 cnpm i vue-quill-editor cnpm i quill cnpm i quill-video-image-module 使用说明 import 'quill/dist/quill.core.css' // import styles...

    iframe跨域通信的通用解决方案-第二弹!(终极解决方案)

    标题中的“iframe跨域通信的通用解决方案-第二弹!(终极解决方案)”指的是在Web开发中,使用`iframe`元素进行跨域通信的一种高级技术。跨域通信是Web应用程序中常见的需求,特别是在需要集成不同来源的网页内容或者...

    jquery.iframe-transport.js包

    jquery.iframe-transport.js包

    EasyWeb iframe多标签版-混淆版源码

    EasyWeb iframe多标签版-混淆版源码 使用说明: 1、使IDEA、Hbuilder、浏览器等开发工具打开; 2、使用http://localhost的形式访问; 3、不能直接双击以file://的形式访问; 4、开发文档:...

    HTML经典教材-iframe详细介绍

    在这个例子中,`<%= iframeId %>`和`<%= iframeSrc %>`会被服务器替换为实际的ID和源地址,使得JavaScript代码能够正确地引用和操作`iframe`。 `iframe`的使用还需要注意跨域问题。由于同源策略的限制,`iframe`...

    js调用-嵌入iframe

    IFrame,全称为Inline Frame,它是一个可以在HTML文档中嵌入另一个HTML文档的元素。通过IFrame,开发者可以将不同的网页内容整合到一个页面上,例如展示广告、视频、地图或其他第三方服务。IFrame的HTML语法如下: ...

    前端项目-Iframe-Height-Jquery-Plugin.zip

    在前端开发中,Iframe( Inline Frame)是一种嵌入网页的元素,允许我们在一个页面上显示其他来源的网页内容。然而,Iframe的一个常见问题是高度自适应问题,即当iframe内的内容高度变化时,如果不手动调整,外层...

    在iframe 中页面中设置遮罩遮罩层

    在网页设计中,有时我们需要在页面中添加一个遮罩层,以实现如加载动画、弹窗提示或隐藏部分内容的效果。本话题将详细讲解如何在iframe中实现页面的遮罩层功能,结合`right.html`, `main.html`, `left.html`, `top....

    js图片iframe内页父页展示全屏

    为了实现图片在父页面全屏展示,我们需要通过JavaScript获取`iframe`中的图片,并将其尺寸设置为与父窗口相同。可以使用`window.innerWidth`和`window.innerHeight`获取窗口大小,然后设置图片尺寸: ```javascript...

    flex-iframe-1.4.6

    "flex-iframe-1.4.6"是一个开源项目,主要功能是为Adobe Flex应用程序提供在Flex组件中嵌入HTML iframe的能力。这个项目是Google Code上的一个存储库,Google Code曾是一个托管开源软件项目的平台,它允许开发者上传...

    iframe背景透明的设置方法

    在上述代码中,父页面的背景色已经设置为红色(#FF0000),而iframe使用了allowTransparency属性,并设置为true,这是开启透明背景的前提条件。 对应的子页面(index.htm)的HTML和CSS代码如下: ```html ...

    html 网页加载

    - **示例**:`width="500"`和`height="230"`分别设置`<iframe>`的宽度为500像素,高度为230像素。 #### `scrolling`属性 - **定义**:控制`<iframe>`内部是否显示滚动条。 - **示例**:`scrolling="no"`表示不显示...

    iframe实现图片异步上传.doc

    `target`属性设置为`iframe`的`id`,这样提交操作会在`iframe`内部进行,不会更新主页面。 4. **JavaScript(jQuery)**: 使用jQuery库来处理事件和交互。`$(document).ready()`确保在DOM加载完成后执行相关代码...

    vue-friendly-iframe-一个Vue js组件,用于创建超快速加载,无阻塞的iframe。-Vue.js开发

    vue-friendly-iframe基于Aaron Peter的文章,用于创建动态异步iframe的Vue js组件:http://www.aaronpeters.nl/blog/iframe-loading- vue-friendly-iframe Vue js组件,用于基于以下内容创建动态异步iframe:亚伦·...

Global site tag (gtag.js) - Google Analytics