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

Question

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

我需要获得span的正确宽度，以便将其作为参数传递给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; }

当我在所有浏览器中警告（$（'。outer-span'）。width（））除了IE7我得到120。 在IE7中，警报显示“外跨度”的宽度为700px，这可能是其父节点之一的宽度。

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

Answer 1

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

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

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

如果您希望简单的块包装器包含<div>，它可能也应该是<div>。

Answer 2

有可能IE7正在抛出一个拟合，因为你有一个围绕div的跨度，并且内联元素不能有块级别的子元素。尝试申请：

.outer-span { display:block }

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

Answer 3

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