Question

我将div定位为相对位置，位于绝对位置的图像内，并在悬停时具有缩放效果。父div有一个边框半径可以切割图像（孩子）的左角在Chrome，Firefox中很好，但在Android上却无效。

html和css必须保持不变，并以某种方式让它在Android手机上正确显示 - 在Iphone上我没有尝试，因为我没有。我在本网站上找到的任何解决方案在我的案例中都不起作用，所以我希望任何人都能有一个有效的解决方案。谢谢

结构是

if(score%10 == 0){
Sound.soundScore1();
}

body {
    background-color:grey;
}
.inner-container {
    width:100%;
    height:160px;
    float:left;
    background-color:red;
    margin-bottom:10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    overflow:hidden;
    position:relative;
    z-index:30;
}
.listing-thumb {
    display: inline-block;
    float: left;
    height: 160px;
    overflow: hidden;
    position: relative;
    width: 214px;
    z-index: 1;
}
.listing-thumb img {
    -webkit-backface-visibility: hidden;
    border: 0 none;
    bottom: 0;
    float: none;
    left: -50%;
    margin: auto;
    max-width: 100%;
    position: absolute;
    right: -50%;
    top: 0;
    max-height: 100%;
    -ms-transform:scale(1);
    -webkit-transform:scale(1);
    transform:scale(1);
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.listing-thumb img:hover {
    -webkit-backface-visibility: hidden;
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}

Answer 1

您在Android上尝试过哪种浏览器？这可能是一个浏览器问题。

在Android上，具有border-radius的绝对父级不会隐藏相对子图像的角

1 个答案: