今天才发现一个简单有趣的问题，有关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. MySQL 压缩文件安装遇到的问题及解决方案

    第一步:从官网下载压缩文件(链接). 第二步:解压该文件,放置到想放到的位置.我的目录是在 C:\mysql\mysql-8.0.12-winx64 下. 第三步:在C:\mysql\mysql-8. ...

  2. Git 爬坑路(从小白开始入门) ——（1）

    通过git管理项目之前,需要先注册一个GitHub账号,方便在远程仓库进行项目管理. Git之项目在本地仓库的管理(从小白开始): 一.push到远程项目 1.在个人的GitHub账号中,创建一个远程 ...

  3. Winform Chart 控件读取datatable后显示图表

    private void Button2_Click(object sender, EventArgs e) { DataTable table = new DataTable(); this.cha ...

  4. 算法（第四版）C# 习题题解——1.4

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 这一节内容可能会用到的库文件有 ...

  5. JS(JavaScript）的进一步了解7（更新中···）

    1.Js操作css样式 div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定 了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

  6. HDU 4348 To the moon（主席树 区间更新）题解

    题意: 给一个数组A[1] ~ A[n],有4种操作: Q l r询问l r区间和 C l r v给l r区间每个数加v H l r t询问第t步操作的时候l r区间和 B t返回到第t步操作 思路: ...

  7. UVA11020 Efficient Solutions

    思路 先判断一个点能不能插入,能插入的话删除所有因为它而没有优势的点 注意 写 S.erase(it); it++; 会RE 要写 S.erase(it++); 代码 #include <cst ...

  8. Python汉诺塔

    import turtle class Stack: def __init__(self): self.items = [] def isEmpty(self): return len(self.it ...

  9. 使用ffmpeg进行视频封面截取

    项目需求:用户上传视频格式的文件,需要转为指定编码的MP4格式(为了适应在线播放),并且截取视频的第一帧作为封面图片(用于展示) 实现: 1.下载ffmpeg.exe 地址:http://ffmpeg ...

  10. Python_Runoob

    python复合赋值 # Fibonacci series: 斐波纳契数列 # 两个元素的总和确定了下一个数 a, b = 0, 1 while b < 10: print(b) a, b = ...