Question

假设我们有以下代码：

    <html>
    <head>
    </head>
    <body>
    <p id="paragraph">
    <h1>HELLO</h1>
    dfsdfdsfdsfsdfsd<br />
    sadadsadsad<br />asdsadsadsadsadsadsad<br />
    asdsadsadsadsadsad
    </p>
   <script type="text/javascript">
    alert(document.getElementById('paragraph').offsetHeight);</script>
    </body></html>

如果存在p标签：

<h1></h1> or <h2></h2>...

它不会返回p标签的实际高度

jquery ($("#paragraph").height())返回0，

也是如此

document.getElementById('paragraph').offsetHeight
document.getElementById('paragraph').style.height

如何解决这个问题？这是一个错误吗？

我在ubuntu上使用firefox，chrome，opera（最新版本）测试它并且不起作用。

Answer 1

<h1>元素作为<p>的后代无效，因此浏览器将其移出，<p>为空，为您提供0高度。

Safari中生成的标记如下所示：

<p id="paragraph"></p>
<h1>HELLO</h1>
dfsdfdsfdsfsdfsd<br>
sadadsadsad<br>asdsadsadsadsadsadsad<br>
asdsadsadsadsadsad
<p></p>

问题与html dom，如何获得p标签的高度？

1 个答案: