我在 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;
}
最佳答案
我们刚刚发现了一个与 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
关于android - css 样式让 webview 显示空白，仅在 4.4(android kitkat)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22841905/