在项目中遇到关于 CSS Overflow Hidden在iPhone & Safari不起作用

调试了半天

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

时间： 2024-10-25 11:35:12

在项目中遇到关于 CSS Overflow Hidden在iPhone & Safari不起作用的相关文章

css中position:relative和overflow:hidden的问题

<div style="height:100px; width:100px; background:#CCC; overflow:hidden;"> <div style="height:300px; width:90px; background:#999; position:relative;"></div> </div> ↓ 解决方案:将父标签的position也设置成relative,代码如下: <div

Django项目中引用js,css文件的可行方法

首先,在manager.py同层级下创建static文件夹, 里面放上css , js, image等文件或者文件夹第二,在项目同名的app中settings文件末尾添加以下内容: STATIC_URL = '/static/' HERE = os.path.dirname(os.path.abspath(__file__)) HERE = os.path.join(HERE, '../') STATICFILES_DIRS = ( # Put strings here, like "/hom

Node.js压缩web项目中的js,css和图片

安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是npm install xxx ,我之前安装都是不适于全局安装的,这个应该无所谓编写压缩的js(应该很好看懂) /*******压缩JS******/ var fs = require('fs'); var uglify = require("../../nodejs/node_modules/u

四、处理项目中的资源文件：es6、css、图片压缩、图片转成base64的编码形式

新建目录 Coponents : 放需要的应用组件,创建layer组件: --App.js : 应用的入口 --创建layer组件: Layer.html Layer.less Layer.js --修改配置文件: *记得安装插件html-webpack-plugins; loader 官网 => Using Loaders 处理资源文件:接受一个资源文件作为参数,处理完返回一个资源文件:比如 CoffeeScript or JSX.这两种原本webpack不支持的格式: 特性: --串联 --

溢出overflow: hidden

如果要防止内容把div容器或者表格撑大,可以在CSS中设置一.overflow: hidden; 表示如果内容超出容器大小,就把超出部分隐藏(相当于切掉)二.overflow: scroll; 这个表示给内容加上控制滑块,可以在容器内部拖动它查看,而不把容器撑大(相当于窗体上的控制滑块) 当一个元素固定为某个特定大小,但内容在元素中放不下.此时就可以利用overflow属性来控制这种情况定义 overflow溢出值: visible | hidden | scroll | auto | in

vertical-align:middle和overflow:hidden;

如果想让一个div或一张图片相对于整个页面居中,用vertical-align:middle可以很简单地解决. 在设置了 width 或 height 的div中,写上overflow:hidden;的话,超出宽度或高度的部分,就隐藏了.就是说,这个overflow:hidden;属性可以保证div的高度或宽度不变.div里添加的东西再多,高度或宽度也不变.超出的部分隐藏.

parent overflow hidden

var color = $("h1").css("color");alert(color);-----------------<h1>Ticket Price:</h1>-----------------h1{color:red;}=============== 实际上h1的颜色值是可以取出来的.那就说明jquery的css方法的值不依赖行内属性,可以取出不是行内的属性.-----那实际上可以做到这一点if($(xxx).css('float

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 原文网址如何在Vue项目中使用vw实现移动端适配作者:大漠日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

转：如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美