android - CSS 边框半径不适用于 Android webview

Question

我有一个基于 Webview 的 Android 应用。

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

在全局范围内，该应用运行良好。然而今天我关心的问题是:一个按钮没有正确显示，但这个问题只出现在今天的一款智能手机型号上(Android 4.2.2 下的 Alcatel 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>

编辑:CSS 通过以下方式加载到 HTML 中:

<link rel="stylesheet" type="text/css" href="css/main.css" />

为此，CSS 包含:

/*position and global appearance of the button's outer portion. The circle is drawn by using border-radius: 50% */
#button_border {
    display: block;
    position: absolute;
    top: 27%;
    left: 20%;
    width: 55%;
    z-index: 7;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
/*Specific design for the play button's outer portion*/
#button_border.button_play {
    background-color: #01b169;
    border: solid .5em #3c3e43;
}
/*Button colors change when touched*/
#button_border.button_play:focus, 
#button_border.button_play:hover {
    color: white;
    background-color: white;
}

/*Position and global appearance of the button's body portion. The circle is drawn by using border-radius: 50% */
#button_content {
    position: absolute;
    z-index: 8;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
#button_content.button_play {
    background-color: white;
    color: #01b169;
    border: solid .1em #01b169;
}
/*Body button colors change when touched*/
#button_content.button_play:focus, 
#button_content.button_play:hover {
    color: white;
    background-color: #01b169;
}
/*Play symbol has to be centered in the button*/
#button_content_play {
    text-align: center;
}

编辑:加载 web View 的 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();
        }

    }

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

注意:我遇到的另一个困难是我无法自己重现该问题，因为我不拥有此特定设备，并且 Android 4.2.2 的模拟器按预期显示按钮。

先谢谢你救了我一命

Answer 1

请替换此 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;


}