CSS 图片边角的圆角不一致。有时他们这样做，有时他们不

Question

我正在开发移动应用程序。这是一个受保护的网站，使用 jQuery 移动作为演示框架。受保护的内容，即团队成员列表，在身份验证和身份验证后通过Ajax传送。这是我 phone 的屏幕截图。该网站响应迅速，可在台式机、平板电脑或手机上使用。显然它针对移动设备进行了优化，具有 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 移动版有一些 CSS 会影响列表中的第一个和最后一个元素。您可以直接修改样式，但通过将 !important 添加到属性 (border-radius: 20% !important;) 来覆盖 jQuery 移动 CSS 可能会好得多。在你的 JSFiddle 中为我修复它。

这是一个fixed example。

Answer 2

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

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

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

所以只需将 class 添加到您的图像中，如下所示：

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

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

CSS 图片边角的圆角不一致。有时他们这样做，有时他们不

CSS image corners don't round off consistently. Sometimes they do and sometimes they don't

html

css

rounded-corners

jquery-mobile