在项目中遇到关于 CSS Overflow Hidden在iPhone & Safari不起作用

调试了半天

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <title></title>
        <style>
           html{font-size:20px;}
           img{
               width: 100%;
           }
            .shop-top {
                width: 16rem;
                background-color: #FFF;
                padding: .5rem;
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
            }
            
            .shop-top .shop-logo {
                width: 2.5rem;
                height: 2.5rem;
                overflow: hidden;
                margin-right: .5rem;
            }
            
            .shop-top .shop-info {
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                -ms-flex: 1;
                -webkit-flex: 1;
                flex: 1;
            }
            
            .shop-top .shop-info .shop-name {
                font-size: .7rem;
            }
            
            .shop-top .shop-info .shop-join {
                border: #535353 1px solid;
                width: 4.1rem;
                margin-top: .25rem;
                font-size: 0px;
                border-radius: .15rem;
            }
            
            .shop-top .shop-info .shop-join .text {
                font-size: .6rem;
                height: .9rem;
                line-height: .9rem;
                color: #FFF;
                background-color: #535353;
                display: inline-block;
                width: 3rem;
                text-align: center;
                overflow: hidden;
            }
            
            .shop-top .shop-info .shop-join .jt {
                display: inline-block;
                width: 1rem;
                height: .9rem;
                position: relative;
                overflow: hidden;
            }
            
            .shop-top .shop-info .shop-join .jt:after {
                position: absolute;
                content: " ";
                display: inline-block;
                width: .3rem;
                height: .3rem;
                line-height: .5rem;
                right: .4rem;
                top: 50%;
                border-color: #535353;
                border-style: solid;
                border-width: .05rem 0 0 .05rem;
                -webkit-transform: translate(0, -50%) rotate(135deg);
                transform: translate(0, -50%) rotate(135deg);
            }
        </style>
    </head>

    <body>
        <div class="shop-top">
            <div class="shop-logo">
                <img src="http://img2.wushang.com/img/2016/11/25/126300080952704867489905.png">
            </div>
            <div class="shop-info">
                <div class="shop-name">测试商家</div>
                <div class="shop-join">
                    <div class="text">进入店铺</div>
                    <div class="jt"></div>
                </div>
            </div>
        </div>
    </body>

</html>

改过以后

 .shop-top{width: 16rem; background-color: #FFF; padding: .5rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
 .shop-top .shop-logo{width: 2.5rem; height: 2.5rem; overflow: hidden; margin-right: .5rem;}
 .shop-top .shop-info{
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -ms-flex:1;
    -webkit-flex:1;
    flex:1;
}
 .shop-top .shop-info .shop-name{font-size: .7rem;}
 .shop-top .shop-info .shop-join{border: #535353 1px solid; width: 4.1rem; margin-top: .25rem; font-size: 0px;
    border-radius: .15rem;
    height: 1rem;
    position: relative;
}
.shop-top .shop-info .shop-join .text{font-size: .6rem; height: .9rem; line-height: .9rem; color: #FFF; background-color: #535353; display: inline-block; width: 3rem; text-align: center;position: absolute}
 .shop-top .shop-info .shop-join .jt{display: inline-block; width: 1rem; height: .9rem;  position: absolute; right: 0;}
 .shop-top .shop-info .shop-join .jt:after{position: absolute; content: " "; display: inline-block; width: .3rem; height: .3rem; line-height: .5rem; right: .4rem; top: 50%; border-color: #535353; border-style: solid; border-width: .05rem 0 0 .05rem;
    -webkit-transform: translate(0,-50%) rotate(135deg);
    transform: translate(0,-50%) rotate(135deg);
}
原文地址:https://www.cnblogs.com/pengBoRan/p/7881163.html