html - Modernizr.borderradius 在不支持 css border-radius 的设备上为 TRUE

Question

我有一个带有 css border-radius 的 div 元素。我的带有默认浏览器 (webkit/533.1) 的 Android 2.2.1 设备不支持 border-radius，因此我尝试使用 modernizr 来检测此功能。问题是 modernizr return true thought border-radius 不起作用。我现在能做什么？我怎样才能检测到它？

<style>
    .border{
       -moz-border-radius: 100%;
       -webkit-border-radius: 100%;
       -khtml-border-radius: 100%;
       border-radius: 100%;          
    }

   .div{
      background: red;
      width:100px;
      height: 100px;                
   }
</style>


<div class="border div"></div>

<script>
  $(document).ready(function(){  
     if (!Modernizr.borderradius) {
       alert ("css border radius is not supported");
       }
  })
</script>

jsfiddle 上的演示 http://jsfiddle.net/7NvLM/

Answer 1

根据 CanIUse , border-radius 受 Android 2.2 浏览器支持。 2.1 需要前缀，但也受支持。因此，Modernizr 报告正确。

但是 CanIUse 还注意到 Android 2.3(可能更早)不支持该属性的百分比值。这就是它对您不起作用的原因。

我猜 Modernizr 正在寻找基本功能支持(它已经有了)。您可能需要为此特定案例编写自己的更具体的测试。