1PX边框未在Chrome Mobile中显示

Question

我正在使用随附的css，并带有一个精灵图像来添加框架图标，并在我的每个单行表单元素中添加插入式盒子shadows（我删除了图像的URL，因为它是在头部动态定义的（CDN问题）。

在PC上的Chrome，FF和IE11中看起来很棒，但是在Android上，1PX边框消失了！

这是有问题的CSS：

.textbox {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    font-size:14px;
    color:#8e8d8d;
    font-family:"Droid Sans";
    padding:11px 15px 10px 50px;
    background-color:#fdfdfd;
    width: 100%;
    display:block;
    border:1px solid #d8d8d8;
    margin:13px 0 -3px 0;
    -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
    box-shadow:inset 2px 2px 4px #f1f1f1;
}
input[type="text"], input[type="password"], select, .remember input[type="checkbox"]+label, .remember input[type="checkbox"]:checked+label { 
    background:url() no-repeat;
    background-size: 39px 297px;
}
input.user     { background-position:0  -31px; }
input.password { background-position:0  -69px; }
input.code     { background-position:0 -107px; }
input.confirm  { background-position:0 -145px; }
input.email    { background-position:0 -183px; }
input.company  { background-position:0 -221px; }
input.phone    { background-position:0 -259px; }

有什么想法？

编辑：

为了清楚起见，这是用于设置背景URL的响应代码：

input.textbox, select.textbox, .checkbox input[type="checkbox"]+label, .checkbox input[type="checkbox"]:checked+label {
    background-image:url('images/page-modal-sprites-1x.png');
}
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ 
    /* Retina images */
    input.textbox, select.textbox, .checkbox input[type="checkbox"]+label, .checkbox input[type="checkbox"]:checked+label { 
        background-image:url('images/page-modal-sprites-2x.png');
    }
}

edit2：

用户httpgio将问题范围缩小到了插图盒子阴影，从而删除了使边界正确出现的。它也仅发生在移动铬上。海豚10没有这样的问题。

我现在正在寻找一种保留我的盒子阴影的方法，而不会在Android Chrome手机上失去边界。

Answer 1

我认为找到解决方案的第一步是告诉我们您正在使用的移动浏览器。这是在多个移动浏览器上还是一个特定的浏览器？

.textbox {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    font-size:14px;
    color:#8e8d8d;
    font-family:"Droid Sans";
    padding:11px 15px 10px 50px;
    background-color:#fdfdfd;
    width: 100%;
    display:block;
    border:1px solid #d8d8d8;
    margin:13px 0 -3px 0;
    -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
}
input[type="text"], input[type="password"], select, .remember input[type="checkbox"]+label, .remember input[type="checkbox"]:checked+label { 
    background:url() no-repeat;
    background-size: 39px 297px;
    border:1px solid #d8d8d8;
}
input.user     { background-position:0  -31px; }
input.password { background-position:0  -69px; }
input.code     { background-position:0 -107px; }
input.confirm  { background-position:0 -145px; }
input.email    { background-position:0 -183px; }
input.company  { background-position:0 -221px; }
input.phone    { background-position:0 -259px; }

盒子阴影必须解决问题。插图盒的阴影实际上是重叠的边框，而不是让它显示。由于我们无法在CSS元素的属性上设置z索引，因此下一个解决方案是用DIV包裹并将边框和边框-Radius应用于包装器Div。但是，由于他想要一种完全简约的方法，因此最好忽略盒子阴影。