在項目中遇到關於 CSS Overflow Hidden在iPhone & Safari不起作用

阿新 • • 發佈：2017-11-23

viewport inf 進入 style -h set flex phone src

調試了半天

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

在項目中遇到關於 CSS Overflow Hidden在iPhone & Safari不起作用

viewport inf 進入 style -h set flex phone src 調試了半天 <!DOCTYPE html> <html> <head> <meta charset="utf-8"

前端經驗之談（在項目中經常使用，但是有時候想不起來的一些東西，待完善，想起一個加一個）

經驗之談 letter 節點 ont 前端 val 隱藏元素 utl ade css：　　align-items: center; 該樣式配合display: flex;可以使子元素垂直居中　　justify-content: center; 該樣式配合display

Mybatis找不到jdbc.properties中的變數的錯誤：{jdbc_driverClassName}不起作用，的解決方案

Exception in thread "main" org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: java.sql.SQLExcepti

Vue webpack打包後，css樣式發生改變或不起作用

用run dev build打包後，發現樣式改變了，最終發現addAdress.vue和myAdress.vue中的有個類名是相同的，但是想著 <style scoped> </style> 在style標籤上新增scoped屬性，就表示它的樣式作用於當下的模組，樣

JSP頁面引入外部CSS檔案，重新整理後不起作用如何解決

一般CSS程式碼可以寫在專門的CSS檔案中，然後某個頁面需要時直接呼叫CSS檔案即可。但發現將CSS檔案引入後仍然不起作用。重新整理後無效果。其實只要在<link>標籤裡新增一個charset="utf-8"就可以了。就像下面這樣：<link rel="st

動態加載js,css(項目中需要的)

tag shee var chrom try tno str url type 最近做的一個項目需要加入百度統計，大家都知道百度統計在頁面引用就是一坨js，實現方法很簡單引用到頁面就ok了。那麽問題來了，雖然我不知道百度統計的原理是啥，我的測試服引用了百度統計，百度統計賬

VUE 項目中怎麽使用animated.css動畫

好用 str main oom 安裝插件 font 效果 ted 宋體這個其實很簡單，animated.css裏有很多動畫。很好用，以下是使用步驟 1，首先安裝插件　　npm install animated.css --save 2. 在main.js裏引

web項目中關於引入JS/css文件, 瀏覽器console出現 net::ERR_ABORTED錯誤的解決方法

can info ons pan 分享圖片 abort 控制臺 -h mage 如圖錯誤：引入js/css後，控制臺出現的錯誤！我的錯誤則是因為在靜態文件夾下的原因. 解決：如果要放在webRoot下的靜態（static）文件夾下，需要在springMv

dubbo在項目中的應用

-a registry 6.4 pac enc implement 序列中心 play 關於dubbo的使用，我們舉個簡單例子：存在2個系統，A系統和B系統，A系統調用B系統的接口獲取數據，用於查詢用戶列表。在上一篇博文介紹了dubbo的創建，zookeeper的創

與正則有關的JS方法結合其在項目中的應用

調用文本但是 ext hone 使用表達式所有 reg 　　　　　　　　與正則有關的JS方法結合其在項目中的應用　　前言　　　　最近項目中用到正則匹配比較多，因此打算深入理解和總結下各個與正則有關的方法，再結合在項目中使用的情況。與正則有關的JS方法共有7個，

項目中遇到的HQL查詢問題

and var markdown mar -a ddc mark www 字段問題描寫敘述：目的：想要查詢出全部最新版本號的組件說明：組件：版本號 =1：n關系，假設這個組件僅僅有一個版本號也要可以查出來。項目中使用的是內

將IDEA maven項目中src源代碼下的xml等資源文件編譯進classes文件夾

默認文件的 ips src directory htm 文件夾 ref 編譯如題，IDEA的maven項目中，默認源代碼目錄下的xml等資源文件並不會在編譯的時候一塊打包進classes文件夾，而是直接舍棄掉。如果使用的是Eclipse，Eclipse的src目錄下

項目中遇到的某些問題及解決辦法（一）

sql () 輸入包含查看定位管理器顯示分布式開發簡介該博文記錄了一些平時在工作中遇到的問題及解決辦法，某些問題有解決辦法，某些問題暫時沒有解決辦法，如果有大神知道的，請多多指點。如果某些問題有更好的解決辦法，也請指教。正文 1、在一個方

React-Native集成到已有項目中的總結

could not rom 浮窗 js文件命令行 led align nba handle 安裝Python 從官網下載並安裝python 2.7.x（3.x版本不行）安裝node.js 從官網下載node.js的官方V6.X.X版本或更高版本。安裝完成後

SSH項目中的困惑之一

ner level err use 路徑系列轉換 abs 必須 1.request.getContextPath()詳解 <%=request.getContextPath()%>是為了解決相對路徑的問題，可返回站點的根路徑。但不用也可以，比如<a

自己在項目中寫的一個Jquery插件和Jquery tab 功能

分享 temp parameter turn sel url position pac tco 後臺查詢結果 PDFSearchResult實體類： [DataContract(Name = "PDFSearchResult")] public class P

記錄項目中easyui的運用

sel 滾動條 value lur src rules mob dex ram 1.實現合並列，且文字顯示居左，背景為固定顏色效果圖：實現代碼： 1 $(‘#tab‘).datagrid({ 2 title : ‘‘, //表格標題 3

salesforce零基礎學習（七十二）項目中的零碎知識點小總結（一）

gin 不同 grant dmi ima -m ron 角色 com 項目終於告一段落，雖然比較苦逼，不過也學到了好多知識，總結一下，以後當作參考。一.visualforce標簽中使用html相關的屬性使用曾經看文檔沒有看得仔細，導致開發的時候走了一些彎路。還好得到

在java項目中怎樣利用Dom4j解析XML文件獲取數據

avi conf get 自己 mar dom4j eas localhost b2c 在曾經的學習.net時常常會遇到利用配置文件來解決項目中一些須要常常變換的數據。比方數據庫的連接字符串兒等。這個時候在讀取配置文件的時候。我們一般會用到一個雷configuratio

在vue項目中快速使用element UI

github 項目開發 clas spa component style 單獨使用修改單獨推薦使用npm安裝 1.安裝：npm install element-ui -S 2.整體引入：　　在你項目的main.js中寫入：　　import ElementU

在項目中遇到關於 CSS Overflow Hidden在iPhone & Safari不起作用

相關推薦