为什么我的提交按钮在jQuery Mobile中看起来重叠？

Question

我使用此HTML在我的PHP / jQuery Mobile Web应用程序中创建了一个表单。

<form action="<?= $_SERVER['REQUEST_URI'] ?>">

    <!-- data received from a previously submitted form -->
    <input type="hidden" name="firstName" value="<?= $firstName ?>" />
    <input type="hidden" name="lastName" value="<?= $lastName ?>" />

    <div data-role="fieldcontain">
        <label for="favoriteWord">Favorite Word:</label>
        <input type="text" name="favoriteWord" id="favoriteWord" value="" placeholder="Please tell us your favorite word." />
    </div>

    <input type="submit" name="submit" value="Submit Form" />
</form>

但是，我的提交按钮看起来很奇怪。它看起来叠加在自身上（如我的屏幕截图所示）。

为什么？

这是我在使用data-ajax="false"时看到的HTML（问题仍然存在，关闭ajax）并点击“查看来源”。

<form action="/submitFavoriteWord">

    <!-- data received from a previously submitted form -->
    <input type="hidden" name="firstName" value="David" />
    <input type="hidden" name="lastName" value="Faux" />

    <div data-role="fieldcontain">
        <label for="favoriteWord">Favorite Word:</label>
        <input type="text" name="favoriteWord" id="favoriteWord" value="" placeholder="Please tell us your favorite word." />
    </div>

    <input type="submit" name="submit" value="Submit Form" />
</form>

---

更新：我在Chrome Web Developer中分析了该页面。以下是“元素”选项卡建议jQuery Mobile正在生成的内容。

奇怪的是，我的提交按钮上方生成了<span>标记。

Answer 1

此示例似乎运行正常：http://jsfiddle.net/shanabus/FG97U/

那么也许它在页面上的其他地方有一个未封闭的HTML元素的问题？如果您发布更多代码，可以验证这一点，但我已经看到了这种情况，并且检查页面上的其他HTML可能会解决您的问题。

Answer 2

很可能是非封闭式标签或额外的现场容器