H5播放器踩坑记录

1. audio标签无法改变样式

尝试给audio标签添加背景图片发现无果，只能自定义播放器样式，通过js捕获audio相关事件的方式实现，相当于自定义样式+audio功能

2. 页面内容高度大于一屏出现滚动条，滚动条挡住播放器

挡住滚动条方法：A B两div，Adiv中通过嵌套div实现滚动条高度全屏，然后Bdiv覆盖Adiv来实现遮挡滚动条方式

image.png

3. a标签添加背景图

当在a标签上使用background-position添加雪碧图时，display为inline无效，必须有块级属性

image.png

4. 子元素margin穿透父元素border

image.png

解决方案：

• 父元素添加BFC
• 父元素添加border-top
• 父元素上层::before隔断上边距接触

image.png

5. 非块级元素宽度与百分比

当为一个inline-block内部元素width增大%时，该inline-block宽度只由子元素原始大小决定，不会随着百分比增大而增大

image.png

6. AB两个相邻inline-block，如果A的子元素存在float属性，则A会比B低

原因不明，通过触发BFC可解决，在没有特殊情况下最好不要轻易使用inline-block，改用inline代替也可解决该问题

image.png