1

同时使用响应式时，边框颜色在移动设备上不显示，在桌面上进行移动分辨率测试似乎很好。

这是来自 iPod 的屏幕截图：

在此处输入图像描述

这是CSS代码：

.box img {
    display: block !important;
    margin-top: 8px;
    border: 1px solid #CCC;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

边框颜色仅出现在诺基亚 Lumia 920 上

我可以尝试什么来解决这个问题？

4

3 回答 3

2

这是 -webkit 错误。通过我从@SonuJoshi 获得临时解决方案的方式仍然没有找到确切的解决方案，即删除添加box-shadow而不是border

旧代码

.box img {
    display: block !important;
    margin-top: 8px;
    border: 1px solid #CCC;

    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
}

新代码

.box img{
    overflow: hidden;
    margin-top: 8px;

    -webkit-box-shadow: 0px 0px 0px 1px #CCC;
       -moz-box-shadow: 0px 0px 0px 1px #CCC;
            box-shadow: 0px 0px 0px 1px #CCC;

    -webkit-border-radius:6px;
       -moz-border-radius:6px;
        border-radius:6px;
}

感谢所有帮助:)

于 2013-05-07T14:48:51.257 回答
1

将此css应用到图像的容器而不是图像...

.box{
display: inline-block;
margin-top: 8px;
border: 1px solid #CCC;

-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}

.box img { width:100%; margin-bottom:-1px; }
于 2013-05-07T11:58:55.877 回答
0

代码将是

.box img { width:100%; margin-bottom:-1px; }
于 2013-05-07T13:32:34.077 回答