bottom-border + border-radius不工作Galaxy S4

Question

这是使用phonegap / cordova制作的，模拟器来自Genymotion。

我正在尝试在底部添加边框，然后围绕边缘，以便得到如下结果：

正如您所看到的，它可以在Google Nexus 7模拟器上正常运行。但是当我尝试在通用的Android手机模拟器上运行它时，它最终会像这样：

该框的相关（无动画）css代码如下：

width:90%;
height:39%;
margin:6% auto;
position:relative;
border-bottom:solid 20px black;
border-bottom-right-radius:50px;
border-bottom-left-radius:50px;
-moz-border-bottom-right-radius:50px;
-moz-border-bottom-left-radius:50px;
-webkit-border-bottom-right-radius:50px;
-webkit-border-bottom-left-radius:50px;
-ms-border-bottom-right-radius:50px;
-ms-border-bottom-left-radius:50px;
-khtml-border-bottom-right-radius:50px;
-khtml-border-bottom-left-radius:50px;
-moz-border-top-right-radius:50px;
-moz-border-top-left-radius:50px;
-webkit-border-top-right-radius:50px;
-webkit-border-top-left-radius:50px;
-ms-border-top-right-radius:50px;
-ms-border-top-left-radius:50px;
-khtml-border-top-right-radius:50px;
-khtml-border-top-left-radius:50px;
font-size:6em;
text-align:center;

Answer 1

我记得-khtml等于-webkit（和--apple），所以你应该只使用-webkit供应商。 -khtml专用于konqueror - linux kde浏览器，我认为在Android设备上也没用，-ms也是。

尝试更改css声明的顺序。在最后放置没有verndors，纯边界底部等的声明。

如果可以，请在实时设备上测试您的代码。