1. 不同浏览器默认样式不一致
问题：margin、padding、列表样式、字体默认不一样
解决：
* { margin:0; padding:0; box-sizing:border-box; }
ul,ol { list-style:none; }
a { text-decoration:none; color:inherit; }
img { vertical-align:middle; }2. IE 兼容问题（低版本浏览器）
问题：不支持 flex、rgba、transform、border-radius
解决：
- 降级布局：用 float + 定位
- 圆角用图片代替
- rgba 用透明图片
- 不强制兼容，直接提示升级浏览器
3. 图片底部有空白间隙
问题：img 下方有几像素空白
img { display:block; }
/* 或 */
img { vertical-align:middle; }4. 浮动父盒子高度塌陷
问题：子元素浮动，父元素高度为 0
解决（万能清除浮动）：
.clearfix::after {
content:'';
display:block;
clear:both;
}5. 外边距垂直方向塌陷（margin 重叠）
问题：上下盒子 margin 会合并
解决：
- 只给一个盒子加 margin
- 给父级加 padding
- 父级加 overflow:hidden /border
6. 100vh 在移动端被地址栏遮挡
问题：手机浏览器下 100vh 不准
解决：
height:100%;
html,body { height:100%; }或用 JS 获取真实高度
7. 移动端点击高亮 / 蓝色背景
解决：
-webkit-tap-highlight-color: transparent;8. 按钮、输入框默认样式丑
解决：
input,button {
appearance:none;
outline:none;
border:none;
background:none;
}9. flex 布局子元素被压缩变形
问题：内容过多，flex 子元素被挤扁
解决：
flex-shrink:0;10. 滚动条样式丑陋 / 隐藏滚动条
解决：
/* 隐藏滚动条但保留滚动 */
::-webkit-scrollbar { display:none; }11. 文字模糊、发虚
解决：
-webkit-font-smoothing: antialiased;12. z-index 失效
原因：
- 没有定位
- 父元素层级限制（层叠上下文）解决：
- 给元素加 position
- 调整父级结构
原创文章，作者：风在逍遥，如若转载，请注明出处：https://www.bjseo.xin/?p=64
