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ウェブ開発者向けのページを分析しました。 ElementsタブがjQuery Mobileが生成していることを示しています。

不思議な、私のsubmitボタンの上に生成された<span>タグがあります。

Answer 1

この例では、正常に動作するようです：http://jsfiddle.net/shanabus/FG97U/

ページ上のどこかに閉じられていないHTML要素を持つので、多分その問題？これはあなたのコードをより多く投稿すると確認できますが、これが起こっているのを見て、ページの他のHTMLをチェックすることで問題が解決するかもしれません。

Answer 2

ほとんどの非閉じタグや余分なfieldcontainer