css 多列布局不同浏览器兼容性引发的思考

css3 中引入了多列布局的模式。

在 mdn 上有一篇文章，详细的介绍了相关信息，有兴趣的童鞋可以阅读下这篇文章：Multiple-column layout - Learn web development | MDN。

但是笔者想针对每个应用了 column 布局的块级区域应用 flex 布局的时候，会出现火狐浏览器布局和 chrome 浏览器不相同的情况。

demo 地址：multiple-column

在 chrome 浏览器打开，状态是这样：

image.png

但是在火狐浏览器上，打开，状态是这样的：

image.png

很明显能看到，同样的代码，两个浏览器布局不一致。

后来经过测试，发现如果去掉 flex 布局，就一样了。

image.png

但是如果又想要使用一些 css3 布局的效果，怎么处理呢？

后来经过测试发现，采用 grid 布局，可以保证两个浏览器的显示效果一致：

image.png

demo 地址：multiple-column2

以上仅仅是针对这个问题的一些思考和尝试。

后来我又想，如果在某些情况下，我们必须要区分开 chrome 浏览器和 Firefox 浏览器，分别写不同的 css，我该如何做呢？

后来在 StackOverflow 上找了一下，找到了有意思的回答：css - What does @-moz-document url-prefix() do? - Stack Overflow

可能有的童鞋可能会很奇怪，为什么找到单独针对火狐浏览器的解决方案，而不是分别针对 chrome、Firefox、safari 等等浏览器的解决方案呢。

因为在实际做项目的时候，safari 因为用户没那么多，对于非电商类的项目，一般领导或者客户不会特意提出来需要对 safari 作适配。

而 chrome 想必大家都清楚，最近发展势头太猛，把 ie 都弄死了，几乎就快成为事实上的浏览器的标准制定者了。

而且，其实还有个小插曲，本来一开始我没想到这种方案，而是想采用 @supports 方式，拿到火狐特定支持的属性，做一些 css hack。

但是试了试发现，没有达到想要的效果，最后才发现，是因为默认情况下，很多前端的项目都用了 GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use 插件，自动将 css 转为各个浏览器都支持的写法，导致单独写的 css hack 都会失效。

但是 @-moz-document url-prefix() 这种写法，一般不会被自动转换。

所以以后如果碰某些 css hack 不生效，可以看看，是不是因为装了自动加前缀的插件导致的。

找到个可以直接查看转换效果的网站，贴一段 css 代码进去，就能看到转换后的代码，非常的直观。

Autoprefixer CSS online

image.png