调试了半天

<!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. python基础7之python3的内置函数

    官方介绍: python3:https://docs.python.org/3/library/functions.html?highlight=built#ascii python2:https:/ ...

  2. React版本更新及升级须知（持续更新）

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 18.0px "PingFang SC Semibold& ...

  3. php等比例压缩图片

    <?php function resizeImage($im,$maxwidth,$maxheight,$name,$filetype) { $pic_width = imagesx($im); ...

  4. 11_什么是sql注入？

    什么是sql注入? --因为后台会把用户输入的插入到后台的sql语句中,来进行sql查询判断用户输入是否存在数据库中,     来验证用户是否合法,就会出现一个问题,用户在做用户验证的时候,在输入框注 ...

  5. 在Tomcat中配置连接池和数据源

    1.DataSource接口介绍 (1)DataSource 概述 JDBC1.0原来是用DriverManager类来产生一个对数据源的连接.JDBC2.0用一种替代的方法,使用DataSource ...

  6. 输入和输出--RandomAccessFile类

    RandomAccessFile 类 RandomAccessFile 类既可以读取文件内容,也可以向文件输出数据. RandomAccessFile 类支持 "随机访问" 的方式 ...

  7. linkin大话数据结构--数组

    数组概述:如何正确理解数组?数组也是一种类型 数组是多个相同类型数据的组合,实现对这些数据的统一管理.数组属引用类型,数组型数据是对象(Object),数组中的每个元素相当于该对象的成员变量数组中的元 ...

  8. GDB 的使用

    gdb使用: 1.编译时必须加-g选项,生成调试需要的信息.如 g++    xxx.cpp   -o   xxx    -g 2.调试最好结合core文件 3.调试命令:gdb   xxx    x ...

  9. 前端开发-DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  10. BZOJ 3881: [Coci2015]Divljak [AC自动机 树链的并]

    3881: [Coci2015]Divljak 题意:添加新文本串,询问某个模式串在多少种文本串里出现过 模式串建AC自动机,考虑添加一个文本串,走到的节点记录下来求树链的并 方法是按dfs序排序去重 ...