检查Google上的元素和标签上的Opera false大小

Question

问题是Opera和Google Chrome上是否存在错误的编码或检查元素。

如果您检查右侧菜单上的元素而不是顶部的元素，您将看到一个标签有0 px 0 px而在firebug中出现一个标签，因为Internet Explorer中的跨度大小与firebug中的相同

我真正的问题是检查元素不能正常工作？以下是代码：http://jsfiddle.net/sMygA

<div class="menutop2">
                    <ul class="list2">
                        <li><a href="site1/services"><span>Your Services</span></a></li>
                        <li><a href="site1/industry"><span>Your Industry</span></a></li>
                        <li><a href="site1/insights"><span>Sharing Insights</span></a></li>
                        <li><a href="site1/client_stories"><span>Client Stories</span></a></li>
                        <li><a href="site1/expert_client"><span class="liwbg">Expert Client</span></a></li>
                    </ul>
                </div>

Answer 1

这不是假大小

“a”元素是内联元素，因此它实际上没有“框”。说它根本没有大小似乎是错误的（因为你'看到'它使用了空间）但是根据规范可以认为是正确的（现在找不到链接）。 报告它的大小因为它的内容大小可能不符合规范，但是检查员是一个面向帮助开发的工具，并且有意义地说它占用了多少视觉空间（即使它不是真的/正确的盒子）如果它看起来像一个盒子。

因此，两个答案（0x0和＃x＃）都可以被认为是正确的。

如果您在使用的检查器中更改了'a'元素的“display”属性并将其设置为“inline-block”，您将检查它们是否报告相同的大小，因为它确实会有一个“盒子”。

当链接只是一个单词时，可能不是很明显，但请考虑以下代码：

<p style="background:grey">This is a paragraph with a link. <a href="#" style="background:yellow">It's an inline element</a> that does not have a bounding box.</p>

当段落被渲染时，云就会在一行中，并且仍然认为是一个盒子，但当它渲染到类似的东西时：

......你可以清楚看到cristal。它不是一个盒子，它是内联内容。