今天才发现一个简单有趣的问题，有关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. 爬坑二 activiti流数据库版本错误引发的问题

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'actModelCont ...

  2. console.log在IE浏览器中会有异常

    因为在IE浏览器无此方法,故此重写 方法一: var console = console || { log: function () { return false; } }; 方法二:window.c ...

  3. 获取手机当前显示的ViewController

    //获取手机当前显示的ViewController - (UIViewController*)currentViewController{ UIViewController* vc = [UIAppl ...

  4. centos7救援模式--误删/usr/bin/恢复

    模拟场景 centos7 误删/usr/bin/等系统内置文件夹, 导致几百个内置命令丢失. 修复 rescue模式 vm模拟一遍(如果在物理机, 可通过U盘方式直接开机U盘进入选择救援模式, 方式通 ...

  5. netty初试

    netty官网:点击进入 学习netty之实现一个丢弃服务器 环境: JDK1.8 netty5.0+ 步骤: 实现一个丢弃服务器 实现一个客户端发送数据 丢弃服务器的创建 //用于接受客户端的的连接 ...

  6. 王之泰201771010131《面向对象程序设计（java）》第十五周学习总结

    第一部分:理论知识学习部分 第13 章 部署应用程序 1.jar文件 a) java 程序的打包:编译完成后,员 将.class 文件压缩打包为 .jar 文件后, GUI 界面 程序就可以直接双击图 ...

  7. Python中不尽如人意的断言Assertion

    Python Assert 为何不尽如人意 Python中的断言用起来非常简单,你可以在assert后面跟上任意判断条件,如果断言失败则会抛出异常. >>> assert 1 + 1 ...

  8. 20165306 Exp3 免杀原理与实践

    Exp3 免杀原理与实践 一.实践内容概述 1.正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,加壳工具,使用shellcode编程 2.通过组合应用各种技 ...

  9. 排查OPENSTACK浮动IP被占用记录

    在openstack上新建机器时,发现用户无法登陆. 检查该机器的22端口,返回 Connection refused.   ping该IP,发现可以ping通.   释放该浮动ip,然后去ping该 ...

  10. 在 Laravel 项目中使用 Elasticsearch 做引擎，scout 全文搜索(小白出品, 绝对白话)

    项目中需要搜索, 所以从零开始学习大家都在用的搜索神器 elasiticsearch. 刚开始 google 的时候, 搜到好多经验贴和视频(中文的, 英文的), 但是由于是第一次接触, 一点概念都没 ...