Question

我正在开发移动应用程序。这是一个使用jQuery mobile作为演示框架的受保护网站。经过身份验证和身份验证后，受保护的内容（团队成员列表）将通过Ajax交付。这是我手机的屏幕截图。该网站具有响应能力，可用于台式机，平板电脑或移动设备。显然，它针对具有tel:，sms:和mailto:链接的移动设备进行了优化

我不了解图像上的奇角。这是不稳定的，并且有75％的时间发生。无论列表有多长，这只会发生在列表顶部图像的左上角，以及列表底部条目的左下角。通常，如果刷新屏幕，则角会显示为圆形。我确定这是某种计时问题，但我之前从未见过。我正在将iPhone 6与Safari浏览器配合使用以进行截屏。在台式机模式下，我在笔记本电脑上的Chrome中看到的东西完全相同。我认为这不是设备或浏览器相关的问题。

HTML：

<div id="page6_team_phones">
    <div role="main" class="ui-content jqm-content">
        <h2>Phone Contact List</h2>
        <ul data-role="listview" id="phonelist" class="ui-listview">
            <li class="ui-li-static ui-body-inherit">
                <div class="img_container"><img class="img-photo" src="https://images.unsplash.com/photo-15..."></div>
                <div class="userName">Andrea Apple</div>
                <div style="clear: both;"></div>
                <div class="phoneNumber"><a href="tel:+11234567891">1234567891</a></div>
                <div class="sms"><a href="sms:+11234567891"><img src="../images/crosstxt-icon.jpg"></a></div>
                <div class="email"><a href="mailto:123@email.com"><img src="../images/email-icon.png"></a></div>
            </li>
            <li class="ui-li-static ui-body-inherit">
                <div class="img_container"><img class="img-photo" src="https://i.imgur.com/KOXOBiN.gif"></div>
                <div class="userName">Bill Banana</div>
                <div style="clear: both;"></div>
                <div class="phoneNumber"><a href="tel:+19876543211">9876543211</a></div>
                <div class="sms"><a href="sms:+19876543211"><img src="../images/crosstxt-icon.jpg"></a></div>
                <div class="email"><a href="mailto:456@fake.com"><img src="../images/email-icon.png"></a></div>
            </li>

CSS：

.img_container {
    float: left;
}
.img-photo {
    height: 24vw;     /*  photo = square aspect ratio  */
    width: 24vw;
    object-fit: cover;
    border-radius: 20%;
}

任何人都完全了解导致此问题的原因吗？为什么只左上角和左下角？改善显示效果的最佳方法？

Answer 1

经检查，我发现jQuery mobile具有一些CSS，这些CSS会影响列表中的第一个和最后一个元素。您可以直接修改样式，但是最好在属性（!important上添加border-radius: 20% !important;来覆盖jQuery mobile CSS。在您的JSFiddle中执行此操作即可为我修复此问题。

这里是fixed example。

Answer 2

我知道已经有一个可以接受的答案，但是感觉更像是一个补丁，而不是完整的理解。

该规则仅触发不属于类.ui-li-icon的任何元素，如下所示：

.ui-listview>li.ui-first-child img:first-child:not(.ui-li-icon)

因此只需将此类添加到图像中即可，

<img class="img-photo ui-li-icon" src="https://images.unsplash.com/..." onclick="openImgModal(this.src)">

这将告诉CSS不要应用这些规则。

CSS图像拐角处的圆角不一致。有时候他们会做，有时候他们不会

2 个答案: