为何display:inline-block与inline flow-root显示效果不一致？

问题原因分析 #

你遇到的表现差异核心是浏览器兼容性问题，和规范定义本身无关：

1. 规范层面的等价性是成立的
   inline flow-root是CSS Display Module Level 3 推出的双值写法，按标准定义确实和旧版单值写法inline-block完全等价：两者的外部表现都是行内级元素，可以和其他行内内容排在同一行，内部都会生成独立的块级格式化上下文（BFC），不存在margin塌陷等常规块级盒子的特性。

2. 差异来自浏览器对新语法的支持度
   display的双值语法属于相对新的特性，很多旧版本浏览器（以及部分老旧内核的浏览器）根本无法识别inline flow-root这个属性值。浏览器遇到不认识的CSS声明时会直接忽略该规则，回退到div元素的默认display: block，自然就表现为块级元素的特性，和inline-block出现了明显差异。

验证方式 #

你可以打开当前浏览器的开发者工具，选中对应的div元素查看样式面板：如果display: inline flow-root这条规则被划上了删除线，就说明该属性值未被当前浏览器识别，已经失效，实际生效的是默认的block值。
如果你使用的是最新版Chrome、Firefox、Edge等主流现代浏览器，双值语法已经得到完整支持，两种写法的渲染效果会完全一致，不会出现差异。

内容的提问来源于stack exchange，提问作者user15936471