日常开发踩坑总结&解决方案

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情。

iframe 高度设置为 0 时还有占位

iframe 是内联元素，默认是跟 baseline 对齐的，iframe 后边有个看不见、摸不着的行内空白节点， 空白节点占据着高度，iframe 与空白节点的基线对齐，导致了 div 被撑开，从而出现滚动条。

解决方案：

• 第一种，设置 iframe 的 vertical-align: top
• 第二种，设置父 div 的 font-size: 0 ，来影响空白节点的 line-height 是 0，使不占据高度
• 第三种，改变 iframe 的内联元素性质，改为块级元素，display: block

fixed 定位影响 flex 布局

设置父容器为 fixed 定位时，可能会影响到子元素的布局，导致整体宽度等变化。

解决方案：

• 设置父容器的 left: 0; right: 0;

box-shadow 被相近元素遮盖

box-shadow 设置的阴影可能被上下相连的层级元素覆盖，无法展示。

解决方案：

• 设置 z-index，注意：定位元素才可使用 z-index ( relative 或者 absolute )

.sticky-shadow {
    box-shadow: 0px 6px 20px 0px #e5e5e5;
    position: relative;
    z-index: 100;
}

IOS(safari浏览器)点击闪现黑灰色背景

dom 有可选中的文字，就可以被整个 touch，在 ios 中被 touch 就会由高亮，也就是半透明背景。

解决方案：

• 设置 -webkit-tap-highlight-color

.box {
    -webkit-tap-highlight-color: transparent;
}

float布局高度错位

float 布局会出现高度错位。

解决方案：

1. 给换行开始的第一个元素加上 clear: left;
2. 给父元素定义 font-size: 0; display: inline-block; vertical-align:top;

连续的图片会有白线

多张连续图片使用 img 标签展示时，因为 img 自身属性是 inline-block，连接处有白线。

解决方案：

• 父元素设置 font-size：0
• img 标签设置 display: block

注意部分机型还会出现高度差问题，所以还需要设置 img 高度减少 1px，也就是 margin-top: -1px