1px的边界移动

Question

我使用的是包括CSS，有精灵形象的收件箱图标和插图箱阴影添加到我的每一个单行的表单元素（我删除了图像的URL，因为它在头部动态定义（CDN问题））。

形式在Chrome，FF看起来不错，和IE11在PC上，但在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上发生。海豚10没有这样的问题。

我现在正在寻找一种方法来保持我的box-shadow不失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来包装它，并将border和border-radius应用于包装div。但是，由于他想要一个完全简约的方法，所以最好省去箱形阴影。