今天才发现一个简单有趣的问题,有关iframe的;

<div style="height: 800px;overflow: auto;">
<iframe src="" width="" height="100%" frameborder="" scrolling="no"></iframe>
</div>

此时div出现了滚动条,百思不得其解,原来还是老问题,就是因为iframe是行内元素,后面的

空白节点占据着高度,iframe与空白节点的基线对齐,导致了div被撑开,从而出现滚动条

解决方案

第一种,设置iframe的vertical-align:top 
第二种,设置父div的font-size:0,从而影响空白节点的line-height是0,从而不占据高度。 
第三种,改变iframe的内联元素性质,改为块级元素,display:block

遇到的有关iframe的滚动条问题的更多相关文章

  1. 关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条

    关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条 关于<iframe>可以通过设置属性scrolling="no" 去掉iframe的两个滚动条. 如何只去掉水 ...

  2. iframe显示滚动条

    子页面通过iframe加载,出现了竖向滚动条 最后查出原因:文档申明 iframe有滚动条的页面的文档申明 <!DOCTYPE html> 改成如下就行了 <!DOCTYPE HTM ...

  3. iframe关于滚动条的去除和保留

    iframe嵌入页面后,我们有时需要调整滚动条,例如,去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条.那么我们应该怎么做呢? 一:去掉全部的滚动条 第一个方法 ...

  4. IE8以下版本iframe出现滚动条和内容空白问题

    在网页中使用iframe引用了第三方的页面 $("#tianqi").html('<iframesrc="http://i.tianqi.com/index.php ...

  5. 去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。

    对于iframe,相信大家都是知道存在很多弊端,比如说不利于搜索引擎的抓取:产生冗余结构体系不易管理等.不过在漫长的开发路上有时候使用是不可避免的. 前两天在做一个退弹的功能的时候使用了iframe, ...

  6. iframe子元素相对于父页面滚动条固定(iframe无滚动条,iframe固定高度有滚动条,两种情况)

    一.当iframe自适应高度,无滚动条时候: 例如这样: //随着父页面滚动条滚动定位“#qn-quc”他的位置固定在顶部 $(parent.window).scroll(function() { v ...

  7. IOS中iframe的滚动条不启作用

    引自:https://www.cnblogs.com/weinan/archive/2013/01/05/2832800.html 问题描述: iframe设置了高度(例如500px).倘若ifram ...

  8. Iframe去掉滚动条

    <html><head><title></title></head><body STYLE='OVERFLOW:SCROLL;OVER ...

  9. IOS上iframe的滚动条失效的解决办法

    #iframe-wrap { position: fixed; top: 100px; bottom: 0px; left: 0px; right: 0px; -webkit-overflow-scr ...

随机推荐

  1. LInux命令英文全称

    Linux命令英文全称   su = Swith user 切换用户,切换到root用户cat = Concatenate 串联uname = Unix name 系统名称df = Disk free ...

  2. python———day1

    1.计算机基础:CPU,内存,硬盘,操作系统 2.python出生于应用 3.python2与python3的区别(宏观): python2:源码不标准,混乱,重复代码太多 python3:统一标准, ...

  3. iOS项目之使用开关控制日志输出的功能

    最近一直在做sdk的项目,用户提出了一个需求,需要屏蔽sdk内部的日志输出.由于sdk内部的日志是为了调试,如果屏蔽了肯定不方便,所以研究了一下日志输出开关的功能. 在这里介绍两种实现方案:一种方案是 ...

  4. QGraphicsItem的paint函数的一些相关问题

    在QGraphicsItem中,一个成员函数paint(),其声明如下: void QGraphicsItem::paint ( QPainter * painter, const QStyleOpt ...

  5. appium+python3+pycharm踩得坑

    错误: selenium.common.exceptions.WebDriverException: Message: A new session could not be created. (Ori ...

  6. 'OFFSET' 附近有语法错误。 在 FETCH 语句中选项 NEXT 的用法无效。

    在使用asp.net core的时候,采用take().skip()分页的时候报如下错误: SqlException: 'OFFSET' 附近有语法错误. 在 FETCH 语句中选项 NEXT 的用法 ...

  7. 软考自查:数据流图(DFD)

    数据流图(DFD) 内容提要 数据流图基本概念 数据字典 数据平衡原则 数据流图基本概念             数据字典     数据流图平衡原则 父图与子图之间的平衡 子图内平衡         ...

  8. qt界面操作

    //控制死窗体 int width = this->geometry().width(); int height = this->geometry().height(); this-> ...

  9. Manjaro 安装svn客户端,以及checkout使用命令

    安装svn sudo pacman -S svn checkout操作指令 svn co http://xxxxxxx /home/xx update 更新版本 svn up [文件/目录] 直接使用 ...

  10. Logstash使用介绍

    Logstash介绍 Logstash是一个数据收集处理转发系统,是 Java开源项目. 它只做三件事: 数据输入 数据加工(不是必须的):如过滤,改写等 数据输出   下载安装 logstash是基 ...