【发布时间】：2013-10-22 20:05:24
【问题描述】：
我有一个非常简单的 jQM 应用程序的主页/索引屏幕/页面标记：
<div id="home" class="container" data-role="page">
<div class="grid-quarter">
<a class="ui-link">
<span class="grid-icon-container">
<span class="grid-icon icon-lock"></span>
<span class="grid-icon-text">LABEL TEXT</span>
</span>
</a>
</div>
<!-- 3 x the same -->
</div>
问题
现在这在 jsFiddle 上运行良好，但是一旦我在我的 jQM 应用程序中抛出完全相同的代码，js .height() 函数（以及其他所有尝试获取元素的高度）都会失败。
我编写了一个函数，它会检查每一个比特来确定高度，并在 jQM 中失败。即使我试图直接从 DOM 对象中获取它，它也会失败。甚至当我看到 DOM 对象具有精确的高度设置时。有趣的是：.width() 输出正确。
我不知道从哪里开始调试这个问题。任何帮助表示赞赏。谢谢。
测试代码
// Trigger on Load and Resize
$( '#home' ).on(
'pageinit'
,function( event )
{
fitIconFont( '.icon-font' );
}
);
// Fit on Window size change
$( window ).resize( function()
{
fitIconFont( '.icon-font' );
} );
function fitIconFont( class_name )
{
// DEBUG
jQuery( class_name ).each( function( index, element )
{
// WORKS:
$( this ).on( 'click', function ()
{
console.log( $( this ).height() );
} );
console.log( $( element ).css('width') );
console.log( $( element ).width() );
// FAILS with 20px as output
console.log( $( element ).css('height') );
console.log( $( element ).height() );
console.log( element.scrollHeight );
console.log( element.offsetHeight );
console.log( element.clientHeight );
console.log( element );
console.log( $( this ).height() );
console.log( $( this ).css('height') );
console.log( this.scrollHeight );
console.log( this.offsetHeight );
console.log( this.clientHeight );
console.log( this );
} );
}
Chrome 开发栏截图
【问题讨论】：
-
可能是 CSS 问题，您可以发布任何自定义 CSS 吗？创建小提琴时，是否包含 CSS？
-
@JonathanRowny 是的，我没有包含 CSS，因为它在 jsFiddle 上与本地开发环境中的 exact 相同。
标签： javascript jquery css jquery-mobile height