调试了半天

<!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:;

    -moz-box-flex:;

    -ms-flex:;

    -webkit-flex:;

    flex:;

}

 .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:;}

 .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不起作用的更多相关文章

  1. create-react-app 搭建的项目中，使用 CSS Modules

    create-react-app 搭建的项目中,使用 CSS Modules: 修改config目录下 webpack.config.dev.js 和 webpack.config.prod.js 文 ...

  2. springboot项目中js、css静态文件路径访问

    springboot静态文件访问的问题,相信大家也有遇到这个问题,如下图项目结构. 项目结构如上所示,静态页面引入js.css如下所示. 大家肯定都是这样写的,但是运行的话就是出不来效果,图片也不显示 ...

  3. vue项目中引入animate.css和wow.js

    本文转自:https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/ ...

  4. CSS Overflow:hidden

    终于知道为什么要设置OverFlow:Hidden了, 看代码: <div id="wrapper"> <figure class="img-wrapp ...

  5. css overflow:hidden无效解决办法

    解决方案:只需要在设定overflow:hidden层加入定位即可 position:relative;left:0px;top:0px

  6. 从项目中学习HTML+CSS

    最近由于工作原因以及自己的懈怠,已经很久都没有更新过博客了.通过这段时间,我发现坚持一件事情是真的很难,都说万事开头难,但是在放弃这件事上好像开头了后面就顺理成章的继续下去了.中间即使不怎么情愿也在努 ...

  7. 修改css的（屏蔽）overflow: hidden;实现浏览器能把网页全图保存成图片

    摘要: 1.项目需要,需要对网页内容“下载”保存成全图片 2.QQ浏览器等主流浏览器都支持这种下载保存功能 3.项目需要场景:编写好的项目维护文档,放在服务器上.如果是txt不能带图片可视化,如果wo ...

  8. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  9. 溢出overflow: hidden

    如果要防止内容把div容器或者表格撑大,可以在CSS中设置一.overflow: hidden; 表示如果内容超出容器大小,就把超出部分隐藏(相当于切掉)二.overflow: scroll; 这个表 ...

随机推荐

  1. 在eclipse中创建maven webapp项目时弹出错误-解决办法

    在eclipse中创建maven webapp项目时报错: Could not resolve archetype org.apache.maven.archetypes:maven-archetyp ...

  2. Python3基础知识之元组、集合、字典

    1.元组 元组特点元组是不可变的两个元组可以做加法,不能做减法 元组的方法 >>> S('a', 'b', 'c', 'd', 'e')>>> S=('a','b' ...

  3. TCP三次握手机制中的seq和ack

    TCP连接的三次握手:第一次(A--->B),SYN=1,seq=x第二次(B--->A),SYN=1,ACK=1,seq=y,ack=x+1 第三次(A--->B),ACK=1,s ...

  4. C语言知识点总结

    本文采用思维导图的方式撰写,更好的表述了各知识点之间的关系,方便大家理解和记忆.这个总结尚未包含C语言数据结构与算法部分,后续会陆续更新出来,文中有漏掉的知识点,还请大家多多指正.

  5. Python--socketserve源码分析(二)

    BaseServer::self.process_request(request, client_address) 实现原理: 在类的继承关系中,当子类中没有相应的方法时就会去父类中寻找, 当继承多个 ...

  6. easyUI中点击datagrid列标题排序

    easyUI中点击datagrid的排序有两种,一种是本地的,一种是服务器的.本地的只能排序当前页,而服务器的可以对全部页进行排序.这里主要是分享下服务器排序. 1.为datagrid添加属性remo ...

  7. PHP date函数详解

    在页面的最前页加上date_default_timezone_set(PRC);   /*把时间调到北京时间,php5默认为格林威治标准时间*/date ()a:   "am"或是 ...

  8. jenkins构建一个maven项目[五]

    标签(linux): jenkins 笔者Q:972581034 交流群:605799367.有任何疑问可与笔者或加群交流 构建一个maven项目,即为构建java项目.模拟实验之前先把实验代码推送到 ...

  9. iOS简单动画效果：闪烁、移动、旋转、路径、组合

    #define kDegreesToRadian(x) (M_PI * (x) / 180.0) #define kRadianToDegrees(radian) (radian*180.0)/(M_ ...

  10. 什么是NAS.什么是黑白群晖?(转)

    前言               为了让更多的新人可以简单了解什么是nas,什么是黑群晖.什么是白群晖!有什么作用?特此制作以下教学!(原文为MOMO所写).图片也大体从互联网上下载.有对原作者不便之 ...