jquery-ui - Windows Phone 设备上我的 jQuery 移动网站上的奇怪渐变

Question

我创建了一个简单的 jQuery 移动网站，当我在 Windows Phone 上查看该网站时，我的页脚和内容之间出现了奇怪的渐变。它只发生在 Windows Phone 上，我不知道它是如何到达那里的。

见图片：http: //imgur.com/m3nChi7

CSS

        .ui-page 
        {
            background-color: white;
            height: 100%;
        }

        .ui-content
        {
            background-color: white;
            height: 100%;
        }

        .ui-footer 
        {
            position: absolute !important;
            bottom: 0;
            width: 100%;
        }

HTML 示例

<div data-role="page" data-theme="c" id="Diensten">
          <div data-role="header">
            <h1>Diensten</h1>
          </div>
          <div data-role="content"> 
            <ul>
                <li>
                    <p>
                    Proofreading
                    </p>
                    <p>
                    Hebt u een tekst (brochure, webtekst, mailing,...) die u nog even wilt laten nalezen? Geen probleem, wij hebben proofreaders voor alle talen van de Europese Unie, het Russiche, Chinees en Japans. Wij zorgen ervoor dat uw tekst klaar is voor publicatie of verspreiding.
                    </p>
                </li>
                <li>
                    <p>
                    Taaladvies
                    </p>
                    <p>
                    Aangezien onze pool van vertalers en revisoren uit mensen bestaat die een taalkundige opleiding hebben genoten, zijn zij ook uitstekend geplaatst om u taaladvies te verstrekken.
                    </p>
                </li>
            </ul>       
          </div>
          <div id="footer" data-role="footer">
            <p>&copy; No Problem</p>
          </div>
    </div>

Answer 1

安装 weinre 并检查分配给该部分 HTML 的类。它将帮助您找到该课程。

http://sviluppomobile.blogspot.com/2013/03/how-to-debug-windows-phone-html5-apps.html

因为 JQueryMobile 为每个元素分配了很多类，所以这些还不是全部：

.ui-page 
    {
        background-color: white;
        height: 100%;
    }

    .ui-content
    {
        background-color: white;
        height: 100%;
    }

    .ui-footer 
    {
        position: absolute !important;
        bottom: 0;
        width: 100%;
    }