调试了半天

<!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. 闲聊cassandra

    原创,转载请注明出处 今天聊聊cassandra,里面用了不少分布式系统设计的经典算法比如consistent hashing, bloom filter, merkle tree, sstable, ...

  2. python装饰器实现对异常代码出现进行监控

    异常,不应该存在,但是我们有时候会遇到这样的情况,比如我们监控服务器的时候,每一秒去采集一次信息,那么有一秒没有采集到我们想要的信息,但是下一秒采集到了, 而后每次的采集都能采集到,就那么一次采集不到 ...

  3. mybatis实战教程二：多对一关联查询(一对多)

    多对一关联查询 一.数据库关系.article表和user表示多对一的关系 CREATE TABLE `article` ( `id` ) NOT NULL AUTO_INCREMENT, `user ...

  4. AI_神经网络监督学习

    神经网络的神奇之处在哪? 所有神经网络创造出来的价值,都是由一种机器学习,称之为监督学习, 下面这些例子神经网络效果拔群,通过深度学习获利最多的是在线广告 技术的进步来源于计算机视觉和深度学习 例如: ...

  5. Linux指令--which,whereis,locate,find

    原文出处:http://www.cnblogs.com/peida/archive/2012/12/05/2803591.html.感谢作者无私分享 which 我们经常在linux要查找某个文件,但 ...

  6. auto和bool

    一.auto' 1.只要在函数内部定义变量,默认是auto int num 等价于  auto int num = 10; 2.C语言中的auto关键字就是自动分配自动释放 二.bool类型 1.头文 ...

  7. jQuery应用操作之---复选框

    1.示例1: <form> 你最爱好的运动是? <input type="checkbox" id="CheckedAll"/>全选&l ...

  8. 简易发号SQL,可用于生成指定前缀自增序列，如订单号，生成优惠券码等

    需求1:订单号要求唯一.长度不太长.自增.但不能通过早上订单号和晚上订单号相减推算出平台大概一天的单量 需求2:要求生成10w张优惠券,要求券码唯一.不能太长,不能轻易猜测出其他券码 根据这些需求提供 ...

  9. ABP官方文档翻译 3.8 数据过滤器

    数据过滤器 介绍 预定义过滤器 ISoftDelete 何时使用? IMustHaveTenant 何时使用? IMayHaveTenant 何时使用 禁用过滤器 关于using语句 关于多租户 全局 ...

  10. 洛谷 [P2701] 巨大的牛棚

    首先,本题是一道最大子矩阵问题,且m,n较小,可以使用DP做, 与 洛谷 [P1387]最大正方形 做法相同. #include <iostream> #include <cstdi ...