【发布时间】:2014-02-14 13:21:31
【问题描述】:
我们正在使用 Cordova 为 Android 和 IOS 构建一个主干应用程序,除了这个特定问题外,它运行良好。使用 HTC One(Android 4.3)时,会出现以下灰色条,我们的任何测试设备均不存在该条。
我已经尝试过但没用的东西:
- 将 webview 背景设置为不同的颜色
- 为 Select 或 Option 元素设置背景颜色
- 尝试添加 -webkit-tap-highlight-color: rgba(0,0,0,0);到选择或选项
- 尝试 -webkit-appearance:none;在选择或选项上
我希望其他人也遇到过这个特定问题并可以帮助我解决这个问题!
HTML:
<li class="icon select">
<label data-model-attribute="type" onclick="" for="type">Type</label>
<select class="index" id="type" name="type" tabindex="0">
<option value="L">L</option>
<option value="B">B</option>
<option value="SLO>SLO</option>
<option value="SLI">SLI</option>
</select>
<b></b>
</li>
计算布局选择(据我所知)
-webkit-appearance: none;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-rtl-ordering: logical;
-webkit-writing-mode: horizontal-tb;
align-items: center;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(255, 0, 0, 0.4);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(0, 0, 153);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 153);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(0, 0, 153);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(0, 0, 153);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(0, 0, 153);
cursor: default;
display: block;
font-family: 'Lucida Grande';
font-size: 13px;
height: 39px;
letter-spacing: normal;
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(0, 0, 153);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
top: 0px;
white-space: pre;
width: 353px;
word-spacing: 0px;
writing-mode: lr-tb;
z-index: 1049;
计算布局选项
color: rgb(0, 0, 153);
cursor: default;
display: inline;
font-family: 'Lucida Grande';
font-size: 13px;
font-weight: normal;
height: auto;
letter-spacing: normal;
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
white-space: pre;
width: auto;
word-spacing: 0px;
Config.xml:(删除了命名空间、名称和描述,因为他们不需要知道这个问题)
<?xml version='1.0' encoding='utf-8'?>
<widget id="example" version="1.2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Example App</name>
<description>
Example Description
</description>
<author email="example@example.com" href="http://www.example.com">
</author>
<content src="index.html" />
<access origin="*" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="true" />
<preference name="SplashScreen" value="splash" />
<preference name="SplashScreenDelay" value="5000" />
<preference name="backgroundColor" value="0xff000000" />
</widget>
【问题讨论】:
标签: css cordova webview android-4.3-jelly-bean