jquery - 如何防止jquery mobile对插入列表中的图标图像应用圆角？

Question

如何防止jquery mobile对插入列表中的图标图像应用圆角？

我用标志 http://jquerymobile.com/demos/1.0rc1/docs/lists/lists-inset.html 检查此页面列表它显示得很好，但是当我使用相同的图标时，它们有圆角。

<li data-theme="a" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-icon ui-corner-top">
<div class="ui-btn-inner ui-li">
    <div class="ui-btn-text">
        <a data-transition="slide" href="lists.html" class="ui-link-inherit"><img class="ui-li-icon ui-li-thumb ui-corner-tl" alt="France" src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png">Lists</a>
    </div>
    <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
</div>
</li>

Answer 1

jQM 为此提供了另一个类:

• ui-corner-none

实例:

• http://jsfiddle.net/TVydA/9/

HTML:

<div data-role="page" class="type-home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon">Lists (class="ui-li-icon")</a>
            </li>
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon">Lists (class="ui-li-icon")</a>
            </li>
        </ul>

        <br />

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon ui-corner-none">Lists (class="ui-li-icon ui-corner-none")</a>
            </li>
            <li>
                <a href="#"><img src="http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="lists" class="ui-li-icon ui-corner-none">Lists (class="ui-li-icon ui-corner-none")</a>
            </li>
        </ul>

    </div>
</div>

查看 jQM CSS

• http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.css

我发现它非常接近 @naugtur 的建议

.ui-corner-none {
    -moz-border-radius:     0;
    -webkit-border-radius:  0;
    border-radius:          0;
}