css - 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 開発者のツールバーには表示されます)...?