主流浏览器CSS兼容技巧有哪些?

说到主流浏览器的CSS兼容问题，真是一把辛酸泪啊！今天调试得好好的样式，明天换个浏览器就全乱套了。记得我有次用::-webkit-scrollbar美化滚动条，在Chrome上美得像艺术品，结果到Firefox一看——直接给我变回原生的默认样式了。这种跨浏览器的兼容性问题，简直就是前端开发的”家常便饭”。

CSS前缀：跨浏览器的”安全模式”

你可能也遇到过-webkit-、-moz-这些前缀吧？不要小看这些看似繁琐的前缀，它们可是解决兼容问题的第一道防线。以渐变背景为例，不同浏览器需要不同的写法：Chrome和Safari用-webkit-linear-gradient，Firefox要加-moz-前缀，标准写法则是linear-gradient。虽然现在很多新特性都不需要前缀了，但遇到重要的兼容问题时，把这些前缀都写全总没错。

说到这个，想起个趣事。有次我在项目中用transform: rotate(45deg)，在IE上就是不生效。排查了半天才发现，原来IE9需要写-ms-transform！这种细微的差别最让人头疼，但掌握了这些技巧后，你就会觉得跨浏览器的CSS开发其实也没那么可怕。

弹性布局的兼容性陷阱

Flexbox现在堪称布局神器，但要完美兼容所有主流浏览器，还是得费些心思。比如老版本的Safari需要-webkit-box，IE11需要用-ms-前缀。更让人崩溃的是，不同浏览器对flex属性的解析还不完全一致！

我曾经在一个电商项目中使用flex布局，在Chrome上商品排列得整整齐齐，结果到了某些国产浏览器上，间距却变得乱七八糟。后来发现要加display: -webkit-box; -webkit-box-align: center;等兼容写法才能完美呈现。这告诉我们：在实际开发中，flex布局虽强大，但兼容性处理不容忽视。

视口单位的小心机

vw、vh这些视口单位用起来确实方便，但在某些移动端浏览器上却暗藏玄机！特别是iOS Safari在处理100vh时，会把工具栏的高度也算进去，导致实际高度超出屏幕。这导致我们的页面底部经常被工具栏遮挡，用户体验大打折扣。

解决方案嘛，要么用JavaScript动态计算高度，要么改用相对更可靠的calc(100vh – 常数px)。毕竟在跨浏览器兼容的世界里，没有什么是完美的，我们能做的就是多了解这些”坑”，并在实际项目中学会规避。