android - 背景不重复不适用于 android 浏览器

Question

我在一个移动网站上工作，该网站有多个输入字段，右侧有背景，我为相同的内容添加了下面的 css 代码

.row input
{
    width:100%;
    padding:10px;
    padding-right:30px;
    font-size:18px;
    background-repeat:no-repeat;
}
.row input.name
{
    background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;
    margin-right:10px;
    border-bottom:1px solid #f0f0f0;
}

和下面的 HTML 相同

<div class="row last">
    <input name="ccname" placeholder="Name on Card" validate="name" class="name validate" type="text" autocomplete="on"/>
</div>

在 native Android 浏览器上，它看起来是所有输入区域的重复背景。

如果我哪里弄错了请告诉我。

Answer 1

我注意到你的 CSS 有一个错误

.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right 13px center;margin-right:10px;border-bottom:1px solid #f0f0f0;}

背景 CSS 中的背景位置应该只使用左或右，然后是顶部或底部值。一个值太多了。

.row input.name{background:url(/images/mobile_default/icons/name_off.gif) no-repeat right center;margin-right:10px;border-bottom:1px solid #f0f0f0;}