今天才发现一个简单有趣的问题，有关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. SpringBoot+Thymeleaf问题

    springboot在controller返回数据到thymeleaf报404 用springboot做一个例子,访问controller可以返回数据,但是到thymeleaf却报404, 检查发现路 ...

  2. 6.JAVA基础复习——JAVA中文档注释与帮助文档的生成

    java中的文档注释:用于说明该类的功能作用方便他人使用关键词前需要加@符 用于类的注释 @author name 作者 @version v1.0 版本 …… 用于函数的注释 @param para ...

  3. 4.JAVA基础复习——JAVA中的构造函数与this关键字

    构造函数:构建创造对象时调用的函数 特点: 1.函数名与类名相同. 2.不用定义返回值类型. 3.没有具体的返回值. public class Demo { private int age; priv ...

  4. php 随机红包算法

    <?php /** * 红包分配算法 * * example * $coupon = new Coupon(200, 5); * $res = $coupon->handle(); * p ...

  5. bzoj4665 小w的喜糖（dp+容斥）

    4665: 小w的喜糖 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 222  Solved: 130[Submit][Status][Discuss ...

  6. Ubuntu 无界面使用selenium chrome + headless

    1. 安装 selenium : sudo pip install selenium 2. 安装 chromdriver: 进入 淘宝镜像源 下载 chromdriver, 可以查看 notes.tx ...

  7. 剑指offer（66）机器人的运动范围

    题目描述 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能 ...

  8. java中annotation

    什么是annotation(注解)? java.lang.annotation,接口Annotation.对于Annotation,是Java5的新特性,JDK5引入了Metadata(元数据)很容易 ...

  9. [Java]先有Class还是先有Object？

    先有鸡还是先有蛋 这个问题让我想到了一个古老的问题,先有鸡还是先有蛋. 回到本题 下面让我们详细看一下这个问题: 在Java的对象模型中: 所有的类都是Class类的实例,Object是类,那么Obj ...

  10. python笔记—循环控制

    1.print可以打印多个参数,在括号内用,号区分,显示时一个,号显示一个空格 2.import导入时可以用as别名代替,方便两个模块中有相同函数时使用 3.序列解包:将一个序列(或任何可迭代对象)解 ...