调试了半天

<!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. Linuxc - 执行c程序

    1.新建工作空间 root@jiqing-virtual-machine:~/cspace/les1# pwd /root/cspace/les1 2.新建c程序 root@jiqing-virtua ...

  2. Java this 关键字的用法

    this 关键字的用法 this 在类中就是代表当前对象,可以通过 this 关键字完成当前 对象的成员属性.成员方法和构造方法的调用. 那么何时用 this? 当在定义类中的方法时,如果需要调用该类 ...

  3. SerialChart串口示波器的成功调试

    2018-01-1601:29:06 深夜更新一波串口示波器! http://t.cn/RQMA3uq 心得体会 总之将数据输出设置为","分割的形式即可 重点注意事项!!!! m ...

  4. windows 下安装和运行 hadoop

    windows下安装hadoop,直接去官网采用简单暴力的方法: 1.下载hadoop的安装包:http://hadoop.apache.org/->左边点Releases->点mirro ...

  5. 使用express+multer实现node中的图片上传

    使用express+multer实现node中的图片上传 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在n ...

  6. elasticsearch聚合查询

    作者注:本文系作者自己的理解.希望大家多多交流指正 官网java API term是代表完全匹配,也就是精确查询,搜索前不会再对搜索词进行分词,所以我们的搜索词必须是文档分词集合中的一个 TermsB ...

  7. junit4X系列--Rule

    原文出处:http://www.blogjava.net/DLevin/archive/2012/05/12/377955.html.感谢作者的无私分享. 初次用文字的方式记录读源码的过程,不知道怎么 ...

  8. 使用EndNote在Word中插入参考文献的格式设置

    endnote其实自带了很多参考文献格式的样式,如下图,但往往跟我们要使用的会有所出入,本文主要介绍的就是设置自定义endnote参考文献格式,以endnote X6和word2003为例,其它版本以 ...

  9. 简述 Hibernate 和 JDBC 的区别、优缺点

    1.hibernate是一个开源的.采用面向对象的思想实现ORM映射框架,它对jdbc进行了一层封装,对于数据库的连接.关闭.数据的持久化(增删改查).事务的管理都进行了封装,使得程序开发的时候可以用 ...

  10. linux的定时任务服务crond（crontab）服务

    1,Crond: Crond是linux系统中用来定期执行命令或指定程序任务的一种服务或者软件.(Centos5以后默认存在) 当优化开机自启动的时候,第一个就是crond. Crond服务默认情况( ...