不同浏览器对CSS的支持差异
做网页开发时，你可能遇到过这样的情况：在Chrome里显示好好的按钮，到了Edge或者Firefox里却错位了。这其实很常见，因为不同浏览器对CSS样式的解析并不完全一致，尤其是老版本IE和现代浏览器之间的差距更大。
比如，flexbox布局在IE10以上才开始支持，而且需要加-ms-前缀才能正常工作。如果你没处理这些细节，页面在某些设备上就会“乱套”。
使用浏览器前缀应对兼容问题
为了确保新特性在旧版浏览器中也能运行，给CSS属性添加厂商前缀是个有效方法。常见的前缀有：-webkit-（Chrome、Safari）、-moz-（Firefox）、-ms-（IE/Edge）等。
.box {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}虽然现在大多数现代浏览器已经不需要手动加前缀，但在面对一些企业内部系统或老旧环境时，还是得留一手。
借助Autoprefixer提升效率
手动写前缀太麻烦，还容易遗漏。推荐使用Autoprefixer工具，它可以自动根据你设定的目标浏览器范围，为CSS规则添加必要的前缀。
比如你只关心支持到Chrome 50以后的版本，它就不会给你加上多余的-webkit-。这个工具通常集成在Webpack、Vite这类构建流程中，配置一下browserslist就行。
注意盒模型的差异表现
另一个坑是盒模型计算方式的不同。默认情况下，box-sizing: content-box会让内边距和边框额外增加元素宽度。而很多开发者更习惯用border-box，这样设置宽高时就包含了padding和border。
为了避免混乱，建议一开始就统一重置：
* {
box-sizing: border-box;
}这一行代码能大大减少布局错乱的概率，尤其是在响应式设计中特别管用。
渐进增强与优雅降级策略
面对不支持某些特性的浏览器，可以采用“渐进增强”的思路——先保证基础功能可用，再为高级浏览器添加炫酷效果。例如圆角按钮在老浏览器中显示为直角也没关系，至少能点；而新浏览器则享受完整视觉体验。
也可以用@supports来检测浏览器是否支持某项特性：
@supports (display: grid) {
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
}
}这样只有支持Grid布局的浏览器才会应用这些规则，避免出错。
实际调试别只盯着一个浏览器
开发过程中，别只在自己常用的浏览器上看效果。抽空去IE、Edge、Firefox甚至手机浏览器里点几下，你会发现不少隐藏问题。现在很多在线工具也支持跨浏览器截图测试，比如BrowserStack，能快速查看页面在各种环境下的真实表现。
有时候一个position: sticky在Safari里需要加-webkit-前缀才能生效，这种细节光看文档容易忽略，实测才是王道。