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

Question

我在三种设备上运行我的 Phonegap 应用程序，Android 2.3.6、Android 3 和 iOS7。问题是，在 Android 2.3.6 上，我看到使用 jQuery switchery 插件的开关按钮是方形的，而不是像在其他手机中呈现的那样是圆形的。

我做过但没有成功的事情:

• 使用跨浏览器边界半径(例如 -web-kit、-moz 等)
• 添加了 !important

来自 switchery 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;
}