调试了半天
<!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);}在项目中遇到关于 CSS Overflow Hidden在iPhone & Safari不起作用
原文地址：http://www.cnblogs.com/pengBoRan/p/7881163.html