javascript - 为什么使用 jQuery Mobile 的 css 中断箭头？

Question

当我制作一个包含 2 或 3 个元素的弹出窗口的简单演示时，我的三 Angular 形箭头在底部可见。

http://jsfiddle.net/TFX6p/8/

当我添加更多元素并设置height 和overflow:auto; 时，我的三 Angular 箭头不显示，为什么？

http://jsfiddle.net/TFX6p/12/

<div data-role="page" id="MainPage">
    <div data-role="popup" id="Mainnavpanel" data-theme="b" data-arrow="b">
        <ul data-role="listview">
            <li> <a href="#MainPageheader" data-rel="close" class="ui-btn">Close</a>

            </li>
            <li><a href="Page1.html" class="ui-btn" data-transition="none">Page1</a>

            </li>
            <li><a href="Page2.html" class="ui-btn" data-transition="none">Page2</a>

            </li>
            <li><a href="Page3.html" class="ui-btn" data-transition="none">Page3</a>

            </li>

               <li> <a href="#MainPageheader" data-rel="close" class="ui-btn">Close</a>

            </li>
            <li><a href="Page1.html" class="ui-btn" data-transition="none">Page1</a>

            </li>
            <li><a href="Page2.html" class="ui-btn" data-transition="none">Page2</a>

            </li>
            <li><a href="Page3.html" class="ui-btn" data-transition="none">Page3</a>

            </li>
        </ul>
    </div>
    <div data-role="header" id="MainPageheader" data-position="fixed" data-tap-toggle="false" data-fullscreen="false">
         <h1>Header</h1>

    </div>
    <div data-role="content">content</div>
     <a href="#Mainnavpanel"  data-rel="popup" data-role="button" >openpopup</a>
</div>

Answer 1

Scroll在 ul element不行，试试申请width-height在外面div#Mainnavpanel-popup喜欢，

#Mainnavpanel-popup{
    width: 300px;
    height: 200px;
    overflow: auto;
}

Demo

已更新 如果它应该可见，则在类 ui-listview 上应用 css喜欢，

.ui-listview{
    width: 300px;
    height: 200px;
    overflow: auto;
}

Updated Demo