CSS之谜：宽度被设置为0像素，没有任何CSS规则？

Question

因此，请查看我在Chrome开发者工具中正在处理的页面的此页面截图：

'匹配的CSS规则'中的顶部规则建议元素的宽度应为160px。

但是，在'计算样式'中，宽度实际上为0px。

如果您单击'0px'，它会再次显示建议宽度为160px的规则。 但实际上并不是这样。

发生了什么？ 是什么将宽度设置为0px，而这对Chrome开发者工具不可见呢？

我该如何调试这个问题呢？

- AP257

---

有没有可能提供一个演示链接和实际发布的代码，而不是图片呢？ - David Thomas

Answer 1

链接使用了 display: inline;。你需要使用 display: inline-block; 或者 display: block;（如果需要支持 IE6-7）。

你可能需要阅读有关 display 属性的规范。

- zzzzBov

Answer 2

由于这是一个 display: inline 元素，您无法设置其宽度。请尝试使用 display: inline-block。

- orlp

---

谢谢。你有什么工具可以帮助我自己解决这种问题吗？ - AP257

嗯，不是很对，对我来说谷歌才是最好的选择。你可以阅读每个规范，但那会花费你很多时间。 - orlp

@nightcracker，@AP257，CSS规范并不那么难读。 - zzzzBov

没错，但 CSS 规范并不是唯一的规范 :) - orlp

如果你使用 CSS 已经超过 1 年，那么你现在应该已经阅读完整个 CSS2 和 CSS3 规范了。它们并不难读，提供了内联示例，并告诉你大部分情况下的用法。此外，quirksmode 是一个关于浏览器兼容性方面很棒的参考。 - zzzzBov

Answer 3

它有display: inline属性，这使得该元素忽略你的宽度、高度值，即使它们被标记为!important

- Cronco