Firefox调试工具display属性显示矛盾：inline-block与block不一致疑问

这种情况基本不是工具Bug，核心是没分清CSS声明值和浏览器计算后生效值的区别：

• 「样式」面板展示的是你在CSS里写的声明，哪怕这个样式被其他规则覆盖，它依然会显示（被覆盖的规则会被划掉）。
• 「布局」面板展示的是浏览器最终渲染时实际使用的计算值，这才是元素真正的display属性。

常见的矛盾原因：

• 你写的display: inline-block被更高优先级的样式覆盖了——比如带!important的规则、元素的内联style属性、更具体的CSS选择器（比如ID选择器优先级高于类选择器）。
• 元素的display被JavaScript动态修改了，样式面板的静态声明没同步实时变化。
• 某些CSS属性会间接改变display的计算值，比如给元素设置float后，浏览器会把它的display计算值调整为block，哪怕你声明的是inline-block。

排查步骤：

• 看「样式」面板里的display: inline-block是否被划掉，划掉就说明被其他规则覆盖了。
• 直接查看「计算」面板里的display值，这里的结果是最准确的。
• 检查是否有JS代码动态修改了元素样式，可以在调试器面板搜索相关修改逻辑。

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