🗒️CSS3小技巧-在div中iframe出现滚动条问题
2022-11-30
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

父元素.parent设定了高度,设置iframe height:100%,通过浏览器观察发现,外层div与iframe高度相同,为什么出现滚动条,发现没有padding/margin的影响。
 
 

解决方法

简单来说,iframe=inline frame它是一个内联元素,默认是baseline对齐的,iframe后边有个看不见、摸不着的行内空白节点, 空白节点占据着高度,iframe与空白节点的基线对齐,导致了div被撑开,从而出现滚动条。 找到原因了,解决方案也就简单了。
  1. 第一种,设置iframe的vertical-align:top
  1. 第二种,设置父div的font-size:0,从而影响空白节点的line-height是0,从而不占据高度。
  1. 第三种,改变iframe的内联元素性质,改为块级元素,display:block
最后发现是vertical-align:baseline导致的,改为top后正常,但是在IE110中仍旧存在问题 经尝试 vertical-align:text-top(text-bottom)可以保证兼容性
  • Css
  • CSS3小问题-flex布局子元素高度设置无效前端项目优雅使用svg
    • Waline
    目录