我们正在使用Cordova构建适用于Android和IOS的Backbone应用程序,并且除此特定问题外,它都能完美运行。使用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>
最佳答案
我终于让Web Inspector Remote工作了,并且系统地禁用了所有样式之后,我发现-webkit-appearance是罪魁祸首。但仅在此特定设备上...设置时
-webkit-appearance:menulist;
它再次开始表现!似乎将其设置为none或button对此版本的Android不起作用...