javascript - IE7 CSS 问题 : cannot get correct span width

Question

我在获取跨度的正确宽度时遇到问题。它适用于以下浏览器，不适用于 IE7: 工作于: 火狐 Chrome 苹果浏览器 IE8

我需要获得正确的跨度宽度，以便将其作为参数传递给 jquery 函数。

示例代码与有问题的代码相同，但替换了通用类名以使示例更易于理解/引用。

相关 HTML:

...
<span class="outer-span">
 <div class="inner-div">
  <a href="http://www.google.com">
   <span class="selected">
    <c:out value="${somestring}" />
   </span>
  </a>
 </div>
</span>
...

相关 CSS:

.outer-span { width: 120px; }

当我在除 IE7 之外的所有浏览器中 alert($('.outer-span').width()) 时，我得到 120。 在 IE7 中，警告显示“outer-span”的宽度为 700px，这可能是其父项之一的宽度。

我知道要准确地推断问题，您可能必须查看我发布的 block 上方的 html。然而，我正在寻找的是一些调试问题的技巧，或者关于 IE7 为什么以这种方式运行或 IE7 如何以不同方式处理事情的线索。我不是要你重写我的代码或想出一些 CSS hack。如果您需要对该问题进行更多说明，请发表评论。

Answer 1

你不能放 <div> ( block 元素)在 <span> 内(内联元素)。这是无效的，没有意义。

浏览器可能会尝试修复您的错误，例如关闭 <span>当它看到开口时 <div> .这将导致跨度为空，因此没有宽度。但这种行为会因浏览器而异。

此外，您不能输入 width在内联元素上。它不会有任何效果，除非您的 IE 处于 Quirks 模式……如果这对您有用，情况可能就是这样。你真的想避免怪癖模式(使用适当的 <!DOCTYPE> !)。

如果你想要一个简单的 block 包装器包含一个 <div> , 它也应该是 <div> .