今天才发现一个简单有趣的问题，有关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. JS，JQuery小知识

    http://blog.163.com/wumingli456@126/blog/static/28896414201112252456459/?suggestedreading&wumii

  2. github一些事

    我的个人github地址是:https://github.com/BUGDuYu 我们开发团队小组的github地址是: https://github.com/APPdoctrine 资源推荐: gi ...

  3. MTK-TP(触屏)解读一

    MTK中的TP代码结构并不复杂,相比于其他的系统更为的简单些.它使用的是input子系统,通过该系统来上报触摸按键. 首先我们来看看TP的文件夹下的各代码文件的功能. 文件名 具体功能 关系文件 tp ...

  4. Transparent PageRoute in Flutter for displaying a (semi-) transparent page

    import 'package:flutter/widgets.dart'; class TransparentRoute extends PageRoute<void> { Transp ...

  5. sql的优化

    适当的索引 尽量不要有空判断的语句 尽量不要使用不等于条件 尽量不要使用or条件 尽量不要使用左右模糊查询 尽量使用exists代替in 尽量避免一次性返回大数据量

  6. ERROR: Got error reading packet from server: A slave with the same server_uuid/server_id as this slave has connected to the master

    centos7.5 做binlog-server,拉取主库binlog报错 问题: [root@db03-53 binlog]# mysqlbinlog -R --host=10.0.0.55 --u ...

  7. ES6中的类和继承

    class的写法及继承 JavaScript 语言中,生成实例对象的传统方法是通过构造函数.下面是一个例子     function Point(x, y) {  this.x = x;  this. ...

  8. HTML解析之BeautifulSoup

    BeautifulSoup是一个用于从HTML和XML文件中提取数据的Python库.BeautifulSoup提供一些简单的.函数用来处理导航.搜索.修改分析树等功能.BeautifulSoup模块 ...

  9. win10 WSL kali 下载源 --另外 恭喜马哥喜提博客

    第一篇也不知道写什么,就把昨晚安装kali时遇见的事写一下吧! 因为win10应用商店已经加入了kali,也省的我再去网上下载镜像,可下载后  wsl  未能设置为开发人员模式, 这算是失误吧!步骤如 ...

  10. Node.js进程内存使用查看方法及返回对象的含义

    1 前言 使用process.memoryUsage() ,然后可以得到一个对象如下: var mem = process.memoryUsage(); console.log(mem); 结果: { ...