边框半径和框阴影在Android 2.3.6中无效

Question

我在三个设备中运行我的Phonegap应用程序，Android 2.3.6，Android 3和iOS7。问题是在Android 2.3.6上我看到使用jQuery可切换插件的切换按钮是正方形而不是四舍五入，因为它在其他手机中呈现。

我做过的事情没有成功：

• 使用跨浏览器边框半径（例如-web-kit，-moz等）
• 已添加！important

来自openshery jquery插件的圆形切换代码：

.switchery>small {
 background: #fff;
 border-radius: 100%;
 -webkit-border-radius: 100%; 
 border-radius: 100%;
-moz-border-radius: 20px; 
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
height: 30px;
position: absolute;
top: 0;
width: 30px;

}

我无法使用开发人员工具来调试设备上的css。

Answer 1

根据您发布的代码，您似乎错过了box-shadow属性的供应商前缀。

Android 2.1-3.2（以及iOS 3.2-4.3）需要-webkit-前缀才能使box-shadow生效：

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);

此外，为了使用border-radius创建圆，您需要将圆的半径设置为框尺寸（宽度或高度）的一半。

因此，您应该使用以下内容：

border-radius: 15px;

对于Android 2.1 and iOS 3.2，需要-webkit-前缀。

全力以赴

.switchery > small {
  background: #fff;

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
          box-shadow: 0 1px 3px rgba(0,0,0,0.4);

  height: 30px;
  width: 30px;

  -webkit-border-radius: 15px; /* 30px / 2 */
  border-radius: 15px;         /* 30px / 2 */

  position: absolute;
  top: 0;
}