html - 检查标签上 Google 和 Opera 上的元素错误大小

Question

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

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

我真正的问题是 inspect 元素不能正常工作？这是代码: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”元素的“显示”属性并将其设置为“内联 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>

当段落被渲染时，它在一行中，并且仍然认为是一个框，但是当它渲染成类似的东西时:

...你可以看到它非常清晰。它不是一个盒子，它是内联内容。