【问题标题】:Border-radius with percentage value not supported in Android BrowsersAndroid 浏览器不支持带百分比值的边框半径
【发布时间】:2013-12-24 12:35:28
【问题描述】:

在 Android 浏览器上使用边框半径的 % 值是否存在已知问题?

我注意到当我使用:

.element {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

边框半径似乎适用于所有移动浏览器,但是当我使用时:

.element {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

边框半径不适用于 Android 浏览器。

【问题讨论】:

    标签: android html css browser-support


    【解决方案1】:

    是的,有:check here, and click on known issues.

    它是这样说的:

    1. Android Browser 2.3 does not support % value for border-radius.
    
    2. Border-radius does not work on fieldset elements in IE9.
    
    3. The stock browser on the Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property but does support the long-hand properties for each corner like "border-top-left-radius".
    

    您将百分比值用于什么目的?请告诉我们,以便我们进一步帮助您。

    现在,既然你用它来做圆圈,你可以使用一个肮脏的技巧:

    #circle {
      border-radius: 9999px; /* makes it a circle */
    }
    

    应该没问题。

    【讨论】:

    • 我正在用它们做圆圈
    • 那个肮脏的黑客太棒了!也非常兼容跨浏览器。在 IE9 中工作。没有在 IE8 中尝试过,因为像我的前任一样,如果我做错了什么,我会把它扔到路边。
    • @Gavin 哈哈 - 很高兴你喜欢它。我之前在程序中使用过它,我将正方形变成圆形的动画,我写50% 或类似性质的东西并不完全实用。
    • 大像素值的解决方法很棒...甚至适用于 android 2.3 ;-) ...虽然是 999px。足以满足我的用例。
    猜你喜欢
    • 1970-01-01
    • 2013-06-15
    • 1970-01-01
    • 2021-12-02
    • 2013-07-30
    • 2011-07-16
    • 2014-11-29
    • 2012-04-08
    • 2012-10-27
    相关资源
    最近更新 更多