在jquery移动页脚的导航栏中仅使用图标而没有文本时出现问题

use*_*284 4 html jquery html5 jquery-mobile

这是我正在使用的代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
        <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
    </head>
    <body>
    <div data-role="page" id="home">
            <div data-role="header" data-theme="b">
                <h1>Home</h1>
            </div>
            <div data-role="content" data-theme="b">
            </div>
             <div data-role="footer" data-position="fixed" data-id="pFooter">
                <div data-role="navbar">
                    <ul>
                        <li><a href="#" data-icon="custom" class="ui-btn-active" >Home</a></li>
                        <li><a href="#first" data-icon="grid">Page1</a></li>
                        <li><a href="#" data-icon="star">Page2</a></li>
                        <li><a href="#" data-icon="arrow-r" data-iconpos="notext"></a></li>
                    </ul>
                </div>
        </div>  
    </div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

你可以在这里看到它 - http://jsfiddle.net/PJWQr/

我面临的问题是,在我使用的最后一个按钮中data-iconpos="notext",交互区域的高度小于导航栏中的其他按钮.

请告诉我如何解决这个问题.

Sim*_*her 11

你实际上不需要iconpos="notext"它,因为它在技术上不是一个按钮.

删除该属性并在a元素的内容中添加空格字符:

<li><a href="#" data-icon="arrow-r">&nbsp;</a></li>
Run Code Online (Sandbox Code Playgroud)