0

我有一个列表视图：

<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 开发人员的工具栏中）......？

4

0 回答 0