使用溢出的 CSS 滚动区域内的链接;不工作 [Android - PhoneGap/Cordova]
Links inside a CSS scroll area using overflow; don't work [Android - PhoneGap/Cordova]
我有一个使用 Phonegap 构建的应用程序,并由 PhoneGap Build
打包
<!-- App -->
<div class="app">
<!-- Header -->
<div id="header">
<a href="index.html"><img src="logo.png" width="250px" /></a>
<br>
<h1>menu</h1>
</div>
<!-- Content -->
<div id="content">
<a href="basic_index.html"><h2>basic</h2></a>
<br><br>
<a href="tools_index.html"><h2>tools</h2></a>
<br><br>
<a href="weapons_index.html"><h2>weapons</h2></a>
<br><br>
<a href="armour_index.html"><h2>armour</h2></a>
</div>
<!-- Footer -->
<div id="footer">
Copyright 2015
</div>
</div>
还有 CSS...
html, body{
height:100%;
}
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
background-color: #4a3424;
background-image: url(background.jpg);
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size:12px;
margin:0px;
padding:0px;
text-transform:lowercase;
overflow: hidden;
width:100%;
height:100%;
}
.app {
padding-top: 35px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 35px;
text-align: left;
overflow: hidden;
}
#header {
position:absolute;
margin-top: 40px;
margin-left: 25px;
margin-right: 25px;
top:0px;
left:0px;
height:135px;
right:0px;
overflow:hidden;
}
#content {
position:absolute;
color: #FFFFFF;
margin-left: 25px;
margin-right: 25px;
top:205px;
bottom:90px;
left:0px;
right:0px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#footer {
position: absolute;
background-color: #1e1e1e;
text-align: center;
bottom: 0px;
height: 50px;
left: 0px;
right: 0px;
overflow: hidden;
}
a {
text-decoration:none;
}
h1 {
font-size:40px;
font-weight: 700;
margin:0px;
overflow:visible;
padding:0px;
text-align:left;
color: #846142;
}
h2 {
font-size:24px;
font-weight: 400;
margin:0px;
overflow:visible;
padding:0px;
text-align:left;
color: #333;
}
滚动工作正常,但是 'content' 中的链接在我 运行 在网络浏览器中工作,但在我 运行 应用程序(由PhoneGap Build) 在我的 Android phone - 尚未测试 iOS 或 Win Phone。
任何想法是什么导致了这个,甚至可能是一个解决方案?
谢谢
适用于 4.2(这对我来说已经足够好了)
我有一个使用 Phonegap 构建的应用程序,并由 PhoneGap Build
打包<!-- App -->
<div class="app">
<!-- Header -->
<div id="header">
<a href="index.html"><img src="logo.png" width="250px" /></a>
<br>
<h1>menu</h1>
</div>
<!-- Content -->
<div id="content">
<a href="basic_index.html"><h2>basic</h2></a>
<br><br>
<a href="tools_index.html"><h2>tools</h2></a>
<br><br>
<a href="weapons_index.html"><h2>weapons</h2></a>
<br><br>
<a href="armour_index.html"><h2>armour</h2></a>
</div>
<!-- Footer -->
<div id="footer">
Copyright 2015
</div>
</div>
还有 CSS...
html, body{
height:100%;
}
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
background-color: #4a3424;
background-image: url(background.jpg);
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size:12px;
margin:0px;
padding:0px;
text-transform:lowercase;
overflow: hidden;
width:100%;
height:100%;
}
.app {
padding-top: 35px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 35px;
text-align: left;
overflow: hidden;
}
#header {
position:absolute;
margin-top: 40px;
margin-left: 25px;
margin-right: 25px;
top:0px;
left:0px;
height:135px;
right:0px;
overflow:hidden;
}
#content {
position:absolute;
color: #FFFFFF;
margin-left: 25px;
margin-right: 25px;
top:205px;
bottom:90px;
left:0px;
right:0px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
#footer {
position: absolute;
background-color: #1e1e1e;
text-align: center;
bottom: 0px;
height: 50px;
left: 0px;
right: 0px;
overflow: hidden;
}
a {
text-decoration:none;
}
h1 {
font-size:40px;
font-weight: 700;
margin:0px;
overflow:visible;
padding:0px;
text-align:left;
color: #846142;
}
h2 {
font-size:24px;
font-weight: 400;
margin:0px;
overflow:visible;
padding:0px;
text-align:left;
color: #333;
}
滚动工作正常,但是 'content' 中的链接在我 运行 在网络浏览器中工作,但在我 运行 应用程序(由PhoneGap Build) 在我的 Android phone - 尚未测试 iOS 或 Win Phone。
任何想法是什么导致了这个,甚至可能是一个解决方案?
谢谢
适用于 4.2(这对我来说已经足够好了)