按钮在选择菜单中重复

Question

我正试图用5个字段做一个页脚。其中一个将是一个选择按钮，但我不知道为什么我有两个选择按钮！

这是我的代码：

<div class="ui-bar ui-grid-c" style="height:30px;width:100%;border-top:solid 2px black;">
    <div class="ui-block-a" style="width:55%;">
        <div class="ui-bar ui-grid-a" style="display:inline;">
            <div class="ui-block-a" style="width:35%;text-align:left;">
                    <label for="mydate" style="margin-top:10px;font-size:10pt;"><b>Compare:</b></label></div>
            <div class="ui-block-b" style="width:65%;text-align:left;margin-top:-10px;"><input name="CompareDate" id="mydate" style="height:35px;" type="date" data-role="datepicker" data-options='{"hideInput": true,"mode": "calbox", "useTodayButton": true}'></div></div></div>
    <div class="ui-block-b" style="width:20%;text-align:left;margin-left:-5px;">
            <select name="select-choice" id="select-choice" data-native-menu="false" data-icon="gear" data-iconpos="notext" >
                <option></option>
                <option value="auto">Auto</option>
                <option value="mix">Mix</option>
                <option value="superpose">Superpose</option>
            </select></div>
    <div class="ui-block-c" style="width:12%;text-align:right;margin-left:2px;"> 
           <a href="#" data-role="button" data-iconpos="notext" data-icon="arrow-l">-12 hours</a></div>
    <div class="ui-block-d" style="width:12%;text-align:left;margin-left:3px;">
           <a href="#" data-role="button" data-iconpos="notext" data-icon="arrow-r">+12 hours</a></div>
</div><!-- Footer -->

这是它的样子：

正如你所看到的，我得到一个没有图标的按钮，另一个正好在下面带有齿轮图标。显示相同的选择菜单。

代码：http://jsfiddle.net/a7pBW/6/

任何人都知道为什么会这样？我确定这是一个愚蠢的事情，但我无法看到它！

非常感谢!!

更新：

我发现它与data-native-menu选项有关，但我不知道如何解决它。

我认为这是一个JQuery错误，因为当我使用Fire Bug运行代码时，我可以看到当你在内部放置带有图标的选择时，我可以找到两个对按钮的引用，这就是它重复的原因。我仍然不知道如何解决它，我刚刚在同一个位置工作，所以你不能看到有两个按钮而不是一个，但我会继续工作，因为这不是一个好方法！

Answer 1

此问题是一个CSS问题。在按钮背景图像css中使用no-repeat选项。