Question

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

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

在全球范围内，该应用程序运行良好。然而，我今天关注的问题是：按钮没有正确显示，但问题只出现在今天的一款智能手机型号上（Android 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>

编辑：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视图的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;


}

Answer 2

对我而言，如果不是所有的价值都相等，它似乎都有效。所以这失败了：

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不起作用。

Answer 3

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

这对我有用：

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

CSS边框半径不适用于Android webview

3 个答案: