边界半径和箱阴影在的Andr​​oid 2.3.6无影响 [英] Border radius and box shadow have no effect in Android 2.3.6

问题描述

我跑我的PhoneGap应用在三个设备的Andr​​oid 2.3.6，Android的3和iOS7。问题是，在Android 2.3.6我看到使用jQuery switchery插件开关按钮是正方形而不是被圆形的，因为它使得在其他手机。

I ran my Phonegap app in three devices, Android 2.3.6, Android 3 and iOS7 . The problem is that on the Android 2.3.6 I see that the switch button using the jQuery switchery plugin is square instead of being rounded, as it renders in the other phones.

我做的事，没有工作的：

Things I've done that didn't work out:

• 使用跨浏览器的边界半径（例如-web-KIT，-moz等等。）


• 新增！重要

从switchery jQuery插件圆形开关的code：

The code of the rounded switch from switchery jquery plugin:

.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。

I can't use a developer tools to debug the css on the device.

推荐答案

根据你贴code，看来你已经错过了的box-shadow的于供应商prefixes 属性。

According to you posted code, it seems you've missed the vendor-prefixes for box-shadow property.

的Andr​​oid 2.1-3.2 （和iOS 3.2-4.3）所需要的 -webkit - preFIX获得的box-shadow 工作

Android 2.1-3.2 (and iOS 3.2-4.3) needs the -webkit- prefix to get the box-shadow to work:

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

此外，为了通过创建一个圆边界半径，你需要设置圆的半径为框尺寸的一半（宽度或高度）。

Also, in order to create a circle by using border-radius, you need to set the radius of the circle as the half of the box dimension (width or height).

因此​​，你应该使用下列内容：

Hence, you should use the following:

border-radius: 15px;

有关的Andr​​oid 2.1和iOS 3.2 中的 -webkit- 需要preFIX。

For Android 2.1 and iOS 3.2 the -webkit- prefix is needed.

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

这篇关于边界半径和箱阴影在的Andr​​oid 2.3.6无影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！