CSS边框半径不适用于Android webview

我有一个基于网络视图的Android应用程序

应用程序的主要部分是使用JS、HTML和CSS设计的。它也是基于引导的

在全球范围内，该应用程序运行良好。然而，我今天关注的问题是：按钮显示不正确，但问题只出现在今天的一款智能手机上（安卓4.2.2下的阿尔卡特TCT Orange Hiro）

该按钮是用CSS绘制的圆圈设计的。在智能手机的上方，圆圈显示为正方形，就好像Webview不理解border radius和-webkit border radius CSS命令一样

HTML：

<div class="row-fluid">
        <div class="text-center">
            <div id="button_border" class="button_play">                    
                <div id="button_content" class="button_play">
                    <div id="button_content_play" class="pictogramme">&#9654;</div>
                </div>
            </div>
        </div>
</div>

编辑：加载web视图的java代码如下：在我的MainActivity的onCreate（）方法中，我有：

    webView = (WebView) findViewById(R.id.webView);

    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);
    settings.setDatabaseEnabled(true);
    settings.setDomStorageEnabled(true);
    settings.setJavaScriptCanOpenWindowsAutomatically(true);

    // Add HTML views to the webviews
    webView.loadUrl("file:///android_asset/www/home.html");

    /**
     * Allow access from file URL (for AJAX request and
     * internationalization)
     */
    if (Build.VERSION.SDK_INT >= 16) {
        Class<?> clazz = webView.getSettings().getClass();
        Method method;
        try {
            method = clazz.getMethod("setAllowUniversalAccessFromFileURLs",
                    boolean.class);
            if (method != null) {
                method.invoke(webView.getSettings(), true);
            }
        } catch (NoSuchMethodException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IllegalArgumentException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

webView=（webView）findviewbyd（R.id.webView）；
WebSettings=webView.getSettings（）；
settings.setJavaScriptEnabled（true）；
settings.setDatabaseEnabled（true）；
settings.setDomStorageEnabled（true）；
setJavaScriptCanOpenWindowsAutomatically（true）；
//将HTML视图添加到Web视图
webView.loadUrl（“file:///android_asset/www/home.html");
/**
*允许从文件URL访问（用于AJAX请求和
*（国际化）
*/
如果（Build.VERSION.SDK_INT>=16）{
Class clazz=webView.getSettings（）.getClass（）；
方法；
试一试{
method=clazz.getMethod（“setAllowUniversalAccessFromFileURLs”，
布尔类）；
if（方法！=null）{
调用（webView.getSettings（），true）；
}
}捕获（无此方法例外）{
//TODO自动生成的捕捉块
e、 printStackTrace（）；
}捕获（IllegalArgumentException e）{
//TODO自动生成的捕捉块
e、 printStackTrace（）；
}捕获（非法访问例外e）{
//TODO自动生成的捕捉块
e、 printStackTrace（）；
}捕获（调用TargetException e）{
//TODO自动生成的捕捉块
e、 printStackTrace（）；
}
}

有人知道我如何解决这个问题吗

注意：我遇到的另一个困难是我自己无法重现这个问题，因为我没有这个特定的设备，Android 4.2.2的模拟器按预期显示了这个按钮

---

提前感谢您救了我的命

请更换此css

#button_content {

     position: absolute;
     z-index: 8;

     border-radius: 50px;
    -o-border-radius topleft: 50px;  
    -o-border-radius topright: 50px;
    -o-border-radius bottomleft: 50px;
    -o-border-radius bottomright: 50px;

    -webkit-border-radius topleft: 50px;  
    -webkit-border-radius topright: 50px;
    -webkit-border-radius bottomleft: 50px;
    -webkit-border-radius bottomright: 50px;


}

---

对我来说，如果不是所有的价值观都是平等的，这似乎是可行的。所以这是失败的：

border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;

但以下工作：

border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 49.99999px;

---

不要添加太多的小数，因为49.999999px不起作用。

当圆角元素也有背景时，会发生这种情况，背景会通过圆角泄漏

这对我很有用：

-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;

---

演示您的代码如何将

css

加载到

webview

中？我编辑了我的问题，添加了加载web视图的java代码和链接css文件的html代码，我不太了解…在什么情况下，分离border radius命令更好？此外，用px替换%会导致绘制带圆角的正方形，而不是我希望的圆形。关于您的回答的另一个问题是为什么在Android上使用-o前缀？是给Opera浏览器的，不是吗？如果我没有弄错的话，Android webview引擎是基于Webkit的。很抱歉，由于现代Android浏览器中奇怪的CSS行为，使用压缩边界半径属性似乎可以解决这个问题。看，我将从用户那里看到这个问题，并向我确认它是否能够解决，感谢您的建议。我会通知你的。我刚从用户那里回来，爆炸压缩边界半径属性并不能解决问题。不幸的是，一切都没有改变。我在找其他的建议。

border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 49.99999px;

-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;