开发者社区> 问答> 正文

通过前缀兼容浏览器的属性一定要连在一起写才能正常么?

抱歉时间..先不放 Demo.. 先描述一下我遇到的问题:
我有一段 CSS 代码, 是这样的:

.it-is-flex {
  display: -webkit-flex;
  -webkit-flex-direction: row;

  display: -ms-flexbox;
  -ms-flex-direction: row;

  display: flex;
  flex-direction: row;
}

这个在 OS X 的 Safari, Firefox, Chrome 都能正常跑的.
但是我跟其他的代码放在一起 cssmin 以后, 发现不生效了.
三个浏览器都能识别到属性, 显示在 Devtools, 但是就是不生效.
我回去看没有 cssmin 的版本, 依然很正常,,,

搞了好久好久, 按网上 Opera 文档某个例子改了一下顺序, 结果 cssmin 就正常了...

.it-is-flex {  
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

难以理解... 有同学遇到过或者知道原因的么?

添加一个测试:

两个 CSS 文件内容一样, 顺序不一样, 都通过 cleancss by-p.css 命令压缩:

展开
收起
a123456678 2016-03-25 16:37:42 2122 0
1 条回答
写回答
取消 提交回答
  • 首先,肯定是不需要连在一起写才能正常的。
    所以最值得怀疑的就是楼主用的CSS压缩工具。
    我帮你看了下,失败的那个文件,#box的display属性被你用的压缩工具删掉了两个,只剩下了display:-ms-flexbox。

    2019-07-17 19:14:40
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
WEB浏览器中即将发生的安全变化 立即下载
基于浏览器的实时构建探索之路 立即下载
基于浏览器的实时构建探索之路--玄寂 立即下载