IE11下padding-top撑开图片小bug

:before {
    content: "";
    float: left;
    width: 1px;
    margin-left: -1px;
    height: 0;
    padding-top: calc(153 / 280 * 100%);
}
:after {
    content: "";
    clear: both;
    display: table;
 }  

现代浏览器下没问题 但IE11下发现  比例出现bug  第一次进入  高度会被撑高很多而刷新后表现就符合预期

一番排查 发现是calc引起的bug  

所以要么手动计算  要么可以用scss编译自动计算

@mixin myimg($height,$width){
    $percentage:$height / $width * 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    &:before{
        content: "";
        float: left;
        width: 1px;
        margin-left: -1px;
        height: 0;
        padding-top: $percentage;
    }
    &:after{
        content: "";
        clear: both;
        display: table;
    }
}

猜你喜欢

转载自blog.csdn.net/qq_22182279/article/details/79710853