调试了半天

<!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. 用jquery怎么删除<table>的一行

    摘录网址:用jquery怎么删除<table>的一行 思路:获取<table>的一行,然后使用 remove() 方法删除之.实例演示如下: 1.HTML结构 <tabl ...

  2. xss防御

    http://blog.csdn.net/ghsau/article/details/17027893

  3. C#读取固定文本格式的txt文件

    C#读取固定文本格式的txt文件 一个简单的C#读取txt文档的程序,文档中用固定的格式存放着实例数据. //判断关键字在文档中是否存在 ] == "设备ID:107157061" ...

  4. RocketMQ-顺序消费

    看了https://www.jianshu.com/p/453c6e7ff81c这篇博客,得出顺序消费的结论."要实现严格的顺序消息,简单且可行的办法就是:保证生产者 - MQServer ...

  5. JVM-类加载器

    类加载器 对于虚拟机的角度来看,只存在两种类加载器: 启动类加载器(Brootstrap ClassLoader)和"其他类加载器".启动类加载器是由C++写的,属于虚拟机的一部分 ...

  6. thinkphp5学习(一)——thinkphp5的目录结构与开发规范

    开发规范: 目录和文件 目录使用小写+下划线: 类库.函数文件统一以.php为后缀: 类的文件名均以命名空间定义,并且命名空间的路径和类库文件所在路径一致: 类文件采用驼峰法命名(首字母大写),其它文 ...

  7. JAVA中默认的编码方式

    转:http://blog.csdn.net/scyatcs/article/details/31356823 编码问题存在两个方面:JVM之内和JVM之外.1.Java文件编译后形成class这里J ...

  8. WEB消息推送-框架篇

    WEB消息推送-comet4j 一.comet简介: comet :基于 HTTP长连接的“服务器推”技术,是一种新的 Web 应用架构.基于这种架构开发的应用中,服务器端会主动以异步的方式向客户端程 ...

  9. iOS-时间戳(或date)转字符串

    1.时间戳转字符串 ///时间戳转化为字符转0000-00-00 00:00 + (NSString *)time_timestampToString:(NSInteger)timestamp{ NS ...

  10. Python之Suds库调用WCF时复杂参数序列化

    今天主要做自动化测技术支持工作,最近一直在做接口自动化这块,前些天在研究将web页面模拟http进行接口自动化,这周杭州那边想测试WCF服务,所以这两天一直在探索.遇到的第一个问题就是服务参数传参序列 ...