时间戳

首页 > 解决方案 > CSS 图像的角落不会始终如一地四舍五入。有时他们会，有时他们不会

html - CSS 图像的角落不会始终如一地四舍五入。有时他们会，有时他们不会

问题描述

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

图像显示上带有圆角的奇怪 CSS 问题

我不明白图像上的奇怪角落。这是不稳定的，并且发生在 75% 的时间。这只发生在列表顶部图像的左上角和列表底部条目的左下角，无论列表有多长。通常，如果您刷新屏幕，角落会显示为圆形。我确定这是某种时间问题，但我以前从未见过。我正在使用带有 Safari 浏览器的 iphone 6 来拍摄该屏幕截图。我在台式机模式下的笔记本电脑上的 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%;
}

任何人都明白究竟是什么导致了这个问题？为什么只有左上和左下？改善显示的最佳方法？

标签： htmlcssjquery-mobilerounded-corners

解决方案

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

该规则仅触发任何不属于类的元素，.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 不应用这些规则。

推荐阅读