Jquery移动列表视图和媒体查询

Question

我有一个列表视图：

<ul data-inset="true" data-role="listview" data-theme="a" id="nav" role="navigation" data-icon="none" data-corners="false">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

使用以下css媒体查询：

@media only screen and (max-width: 767px) { 
    .ui-corner-top {
        -moz-border-radius-topleft: 0;
        -webkit-border-top-left-radius: 0;
        border-top-left-radius: 0;
        -moz-border-radius-topright: 0;
        -webkit-border-top-right-radius: 0;
        border-top-right-radius: 0;
    }
    .ui-corner-bottom {
        -moz-border-radius-bottomleft: 0;
        -webkit-border-bottom-left-radius: 0;
        border-bottom-left-radius: 0;
        -moz-border-radius-bottomright: 0;
        -webkit-border-bottom-right-radius: 0;
        border-bottom-right-radius: 0;
    }

} /* end media query */

假设发生的是当用户在较小的屏幕上查看列表视图时，圆角变成方角。

然而，这似乎在Chrome中运行良好，但不适用于Safari或iPhone。事实上，如果我在Safari上使用Firebug lite，看起来风格甚至没有出现（但它显示在Chrome开发人员的工具栏中）......？