Question

我在4.4中发现一个错误，当我将样式表链接到我的html页面时，webview显示一个空白页面。

当我删除样式表时，它会显示HTML，但我不知道样式表有什么问题？

当我从css中删除所有行时，我仍然会收到错误，唯一的方法是删除我的css文件？

    <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Gafata' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="stylesheet/style.css" type="text/css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/noscroll.js"></script>
        <script type="text/javascript" src="js/jsscript.js"></script>
        <script type="text/javascript" src="js/getInfo.js"></script>
    </head>
    <body>

        <div class="background"></div>
        <div class="button">
            <i class="fa fa-align-justify"></i>
        </div>
        <div class="wrapper">
            <div class="menu">
                <h2>Menu</h2>
                <ul>
                    <li class="programma">Programma</li>
                    <li class="uitslagen">Uitslagen</li>
                    <li class="standen">Standen</li>
                    <li class="tweets">Tweets</li>
                    <li class="informatie">Informatie</li>
                </ul>
                <div class="logo"></div>
            </div>   
            <div class="mainContent">
            </div>
        </div>
    </body>
</html>

你能看看吗？也许有人知道这个问题？

html {
    width:100%;
    height:100%;
    background: #fff;
    margin:0;
    padding:0;
    overflow-x: hidden;
}

body {
    width:100%;
    height:100%;
    background: #fff;
    margin:0;
    padding:0;
    overflow:hidden;
    overflow-x: hidden;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
    -webkit-tap-highlight-color: transparent;
} 

.background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url(../images/bg.jpg);
    background-position:center;
    background-size:cover;
}

.wrapper {
    width:180%;
    height:100%;
    position:absolute;
    overflow:hidden;
}

.mainContent {
    width:51%;
    height:90%;
    margin-left: 1%;
    margin-top:40px;
    background-image:url(../images/content_bg.png);
    background-repeat:repeat;
    border:2px solid #838282;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    overflow:auto;
    text-align:center;
    float:left;
    padding:4px;
}

.button {
    position:fixed;
    top:2px;
    left:8px;
    border:2px solid #35479d;
    padding:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor:pointer;
    z-index:200;
}

.button i {
    color: #35479d;
    font-size:23px;
}

.return {
    position:fixed;
    top:-5px;
    left:54px;
    padding:5px;
    cursor:pointer;
    z-index:200;
}

.return i {
    color: #35479d;
    font-size:42px;
}

.mainContent h2 {
    font-family: 'Gafata', sans-serif;
    font-size:26px;
}

.mainContent ul li {
    font-family: 'Gafata', sans-serif;
    list-style:none;
    margin-bottom:9px;
    margin-left:-37px;
    font-size:22px;
    color:blue;
}

.mainContent ul li.header {
    font-size:24px;
    margin-top:10px;
    color:#fff;
}

.mainContent ul a {
    text-decoration:none;
    color:#27346e;
}

.mainContent ul a:visited {
    text-decoration:none;
    color:#27346e;
}

.menu {
    width: 0px;
    height: 100%;
    background-image:url(../images/menu_bg.png);
    background-repeat:repeat;
    border-right:3px solid #1d1d1d;
    float:left;
    text-align:center;
    -webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
    transition: all 1s;
    overflow:hidden;
}

.menu h2 {
    font-family: 'Gafata', sans-serif;
    color:#0042ff;
    margin-bottom:40px;
    padding-bottom:5px;
    border-bottom:2px solid #1d1d1d;
    font-size:36px;
}

.menu ul li {
    font-family: 'Gafata', sans-serif;
    list-style:none;
    width:90%;
    margin-left:-3px;
    border-bottom:1px solid #1d1d1d;
    padding-bottom:3px;
    margin-bottom:30px;
    font-size:24px;
    color:#fff;
    height:55px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.logo {
    position:relative;
    margin:0 auto;
    margin-top:-11%;
    background-image:url(../images/logo.png);
    width:100px;
    height:100px;
    background-repeat:no-repeat;
}

.logo_informatie {
    background-image:url(../images/logo.png);
    width:100px;
    height:100px;
    margin:0 auto;
}

.logo_b2w {
    background-image:url(../images/b2wlogo.png);
    width:212px;
    height:159px;
    margin:0 auto;
}

Answer 1

我们刚刚发现了webviews和Android 4.4的类似问题。包含整个HTML部分的顶级DIV有一个CSS类：

.task-resolution {
    background: #232323;
    position: absolute;
    width: 100%;
    bottom: 0;  
    z-index: 50;
}

通过删除位置或底部修复我们的问题。仍处于确定冲突究竟是什么的过程中，但这可能会有所帮助。此外，它正在删除一个样式元素。还有你看到这个链接？ http://developer.android.com/guide/webapps/migrating.html

css样式让webview显示空白，仅在4.4（android kitkat）

1 个答案: