我们正在使用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不起作用...

10-05 21:16
查看更多