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

Question

我在获得正确的跨度宽度时遇到问题.它适用于以下浏览器,而不适用于IE7:适用于:Firefox Chrome Safari 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; }

当我在所有浏览器中警告($('.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>.