如何防止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

您应该覆盖CSS而不是遍历每个元素。这不适用于稍后带到DOM的元素。

试

<style>
img.ui-corner-tl{
-webkit-border-radius: 0px !important;
 -moz-border-radius: 0px !important;
 border-radius: 0px !important;
}
</style>

Answer 2

jQM有另一个类：

• UI-角无

直播示例：

• 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;
}

Answer 3

我看到你的img标签标记中有“ui-corner-tl”。你注意到了吗？