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; }

有什么想法吗？

修改

为清楚起见，以下是用于设置背景网址的响应代码：

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已将问题缩小到插入框阴影，删除会导致边框正确显示。它也只发生在移动铬。 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包装它并将border和border-radius应用于包装器div。然而，由于他想要一个完全简约的方法，最好省略盒子阴影。

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

1 个答案: