Windows设备上我的jQuery移动站点上奇怪的渐变

Question

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

见图：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%;
    }