IE7 CSS 问题：无法获得正确的跨度宽度

Question

我在获取正确的跨度宽度时遇到问题。它适用于以下浏览器，但不适用于 IE7： 工作于： 火狐 铬合金 苹果浏览器 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 之外的所有浏览器中发出警报时（$('.outer-span').width()) 我得到 120。 在 IE7 中，警报显示“outer-span”的宽度为 700 像素，这可能是其父级之一的宽度。

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

Answer 1

您不能将<div>（块元素）放在<span>（内联元素）中。这是无效的，没有意义。

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

此外，您不能将width 放在内联元素上。除非您的 IE 处于 Quirks 模式，否则它不会有任何效果……如果这对您有用，可能就是这种情况。您真的想避免 Quirks Mode（使用正确的 <!DOCTYPE>！）。

如果您想要一个简单的块包装器包含<div>，它可能也应该是<div>。

Answer 2

IE7 可能会出现问题，因为您有一个围绕 div 的跨度，并且内联元素不能有块级子级。尝试申请：

.outer-span { display:block }

如果可行，那么我建议将有问题的跨度更改为 div。

Answer 3

默认情况下，span 是内联的，div 是块元素。在不更改默认 CSS 显示属性的情况下，在 span 中包含 div 没有多大意义。尝试在它们两个上使用具有 CSS 宽度的嵌套 div，或者将内部 div 更改为跨度，或者在内部 div 上使用 display: inline。