1px 边框未在 Chrome 移动设备中显示

Question

我正在使用包含的 CSS，带有一个精灵图像来为我的每个单行表单元素添加内置图标和插入框阴影（我删除了图像的 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 已将问题缩小到插入框阴影，删除它会导致边框正确显示。它也只发生在移动 chrome 上。 Dolphin 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-index，下一个解决方案是用 div 包装它，并将边框和边框半径应用于包装器 div。然而，由于他想要一种完全简约的方法，最好不要使用盒子阴影。