Jquery Mobile - 标题按钮文本被截断

Question

我正在使用Jquery Mobile构建一个Phonegap Web应用程序。 我的页面中有一个标题，左侧是标题和自定义按钮。 HTML代码是这样的：

 <div data-role="page" id="otsTopPage" data-theme="a"> 
        <div data-role="header" data-position="fixed" data-theme="a">
            <h1 id="ots_top_h1"></h1>
            <a id="aboutButton" href="common/about.html" data-role="button" data-rel="dialog"></a>
        </div> 

        <div data-role="content">
            <fieldset class="ui-grid-b" id="TopGrid">
            </fieldset>
        </div>

        <div data-role="footer" data-id="navBar" data-position="fixed" data-theme="a">
            <div data-role="navbar">
            </div><!-- /navbar -->
        </div>
 </div>

内容由jquery文件生成。

标题和按钮在浏览器中都显示正常，但是当我构建应用程序时，按钮文本会被截断，如下所示：

同样的事情发生在另一个包含两个按钮的页面中：

        <div data-role="header" data-position="fixed" data-theme="a">
            <a id="tpoShow_back_button" href="#" data-rel="back" 
                data-transition="slide" data-direction="reverse">Back</a>
            <h1 id="formPageTitle" ><span id="tpo_show_object_types"></span></h1>
            <a href="map.html" id="tpoShow_map_button" >Map</a>
        </div>

后退按钮显示正常，但“地图”按钮被截断。

有什么想法吗？