IE7 CSS问题:无法获得正确的span宽度

Question

我有一个问题得到一个跨度的正确宽度。它在以下浏览器中工作，而不是在IE7中:适用于:火狐铬SafariIE8

我需要得到正确的span宽度，这样我就可以把它作为一个参数传递给jquery函数。

示例代码与problem代码相同，但替换了泛型类名，使示例更容易理解/引用。

相关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; }

当我alert($('.outer-span').width())在除IE7以外的所有浏览器中，我得到120。在IE7中，警告显示"out -span"的宽度是700px，这可能是它的父元素之一的宽度。

我知道，要准确地解释这个问题，你可能必须看到上面的html块，我已经发布。然而，我正在寻找的是一些调试问题的技巧，或者是关于IE7为什么这样做或IE7如何处理不同事情的线索。我不希望你重写我的代码或提出一些CSS hack。

Answer 1

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

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

同样，你不能把width放在内联元素上。它将没有效果，除非你有IE在怪癖模式…如果这对你有用，可能就是这种情况。你真的想避免Quirks模式(使用合适的<!DOCTYPE> !)。

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

Answer 2

这是可能的，IE7抛出合适的，因为你有一个跨度周围的div，和内联元素不能有块级的孩子。尝试应用:

.outer-span { display:block }

如果可以，那么我建议将span更改为div。

Answer 3

默认情况下，span是内联的，div是块元素。如果不改变默认的CSS显示属性，在span中放置div是没有多大意义的。尝试使用嵌套的div和CSS宽度，或者将内部div更改为span，或者在内部div上使用display: inline。