Question

如何正确获取其中包含多个元素的内联元素的高度。例如，请参阅fiddle。这仅适用于Firefox，但不适用于其他浏览器。在其他浏览器中，它只获得h2之前的文本高度。可能是什么问题呢？包装器需要是内联元素。

这里的例子：

<div class="inline-element" style="display: inline">This is a sample text for an inline element. How to determin the height on entire element if it has more elements inside. Thanks.This is a sample text for an inline element. How to determin the height on entire element if it has more elements inside. Thanks.<h2>This is a title inside inline element</h2><p>This is a paragraph inside inline element</p>This is a sample text for an inline element. How to determin the height on entire element if it has more elements inside. Thanks.</div>

和jquery代码：

var height = $('.inline-element').height();

console.log(height);

Answer 1

您遇到的问题是由于一个常见规则：您不能将块元素放在内联元素中。您无法在div中添加span，但可以在span中添加div。如果您要在html-validator中测试代码，那就没问题，但是因为您使用内联样式将其设置为手动内联，所以会导致不可预测的行为。

您可以使用.innerHeight()或.outerHeight()：

// Without padding,border and margin
var height = $('.inline-element').innerHeight();

// WITH padding,border and margin 
var height = $('.inline-element').outerHeight();

你也可以获得css值（但我怀疑你想要那个）。如果你想获得css的高度：

// The css value of height with jQuery
var height = $('.inline-element').css('height');

jquery获取内联元素的高度仅在Firefox中有效

1 个答案: