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>

在本机 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 中的 background-position 应该只使用 left 或 right ，然后使用 top 或 bottom 值。一个值太多了。

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