我的jQuery移动网站上的Windows手机设备上的奇怪渐变

时间:2013-08-27 12:56:28

标签: jquery-ui windows-phone-7 jquery-mobile

我创建了一个简单的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>

1 个答案:

答案 0 :(得分:0)

安装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%;
    }