获取带格式文本的DIV或Span的动态宽度高度

Question

获取包含一些非格式化文本的Div或Span的宽度或高度非常容易，例如：

<div>Hello World</div> 

通过使用JQuery的width()或height()方法。下面的例子似乎不适用于格式化文本元素：

<span id="caption" class="caption" style="left: 406px; top: 357.5px;">
<textformat leading="2">
    <p align="LEFT">
        <font face="Verdana" color="#FFFFFF" size="4" kerning="0" letterspacing="0">
            <b>TYPE</b><b><i>iorad</i></b>and<b>PRESS ENTER</b>
        </font>
    </p>
</textformat>
</span>

这个示例包含一些格式化的文本元素，当我们呈现html页面时，这些元素可以很好地显示。但是，当我们尝试获取动态宽度或高度时，它要么返回0，要么返回null，如下所示：

$(".caption").width() returns 0

对于从jquery或js获取动态宽度高度的解决方案有什么想法吗？

Answer 1

这是因为HTML代码被破坏了。

您不能在内联元素(span)中包含块元素(p)，因此浏览器会尽力更正代码。您尝试使用的特定浏览器通过将block元素移到inline元素之外，将inline元素保留为空。

Answer 2

它起作用了。请看这里的演示http://jsfiddle.net/Simplybj/ZkEyR/1/