移動端 常見布局CSS3的細節

結合 Framework7 和ios UI系統，微信weUI，支付寶H5    我們在移動端一些css用法 細節的有了更深的了解；

 

高斯模糊的顯示效果，ios8以上支持，ios8以上0.5px，backdrop-filter:  blur(10px)等新的屬性被支持；

適當利用偽元素 比如menu 菜單icon； (ps：安卓uc 瀏覽器 偽元素transition支持的不是很好;)

 

list   arrow 箭頭,簡易，不依賴字體，圖片；減少請求；最早從weUI中看到這樣寫；支付寶 H5頁面 一些  arrow 也是直接這么寫的

 

list箭頭 還可以做成返回頂部icon 箭頭

上圖返回頂部 icon css 代碼 ，（css  rotate 前面 GPU hack 一下，否則返回頂部箭頭一點細微的 鋸齒缺失， -webkit-transform:translateZ(0) rotate(-45deg);）

.goTop{ position:fixed; right:10px; bottom:40px; width:42px; height:42px; border:1px solid rgba(243,243,243,.9); background:rgba(0,0,0,.4); z-index:888; border-radius:22px; overflow:hidden; }
.goTop:before{content: " ";display: inline-block; width:1px; height:20px; position:absolute; left:50%; top:50%; margin-top:-10px; background:#fff; }
.goTop:after{    content: " ";display: inline-block;-webkit-transform:translateZ(0) rotate(-45deg);transform:translateZ(0) rotate(-45deg); 
  height:14px;width: 14px; border-width: 1px 1px 0px 0px;border-color: #fff;border-style: solid; position: absolute;left: 50%;top: 50%;margin-top: -8px;margin-left: -7px;}

 

移動端 44，指尖的觸摸面積有關；很早的概念了，導航條，list 最小高度44px， 微信ui許多都是 地方都是參照 ios 系統ui設計 

導航欄  兩端自適應布局  -webkit-box-pack:justify; 

常見的地方 ios 這種nav 導航欄 ，充分利用css3 屬性（ -webkit-box-pack:justify; ps：目前安卓的 uc 瀏覽器   子元素不可以是行內元素（span a 等） 否則 這屬性失效 ）

還有人遇到過 ；flex下的子元素必須為塊級元素，非塊級元素在android2.3機器下flex失效  但是我的安卓手機 4.x以上 uc瀏覽器還是必須 塊狀元素；

 

ios原生 checkbox 樣式

 <label class="label-switch">
                            <input type="checkbox">
                            <div class="checkbox"></div>
 </label>

 

.label-switch {
    display: inline-block;
    vertical-align: middle;
    width: 52px;
    border-radius: 16px;
    box-sizing: border-box;
    height: 32px;
    position: relative;
    cursor: pointer;
    -ms-flex-item-align: center;
    -webkit-align-self: center;
    align-self: center;
}
.label-switch input[type="checkbox"] {
    display: none;
}


.label-switch .checkbox {
    width: 52px;
    border-radius: 16px;
    box-sizing: border-box;
    height: 32px;
    background: #e5e5e5;
    z-index: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    position: relative;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
}

.label-switch .checkbox:before {
    content: ' ';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 48px;
    border-radius: 16px;
    box-sizing: border-box;
    height: 28px;
    background: #fff;
    z-index: 1;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.label-switch .checkbox:after {
    content: ' ';
    height: 28px;
    width: 28px;
    border-radius: 28px;
    background: #fff;
    position: absolute;
    z-index: 2;
    top: 2px;
    left: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
} 
 .label-switch input[type="checkbox"] {
  display: none;
}
.label-switch input[type="checkbox"]:checked + .checkbox {
  background: #4cd964;
}
.label-switch input[type="checkbox"]:checked + .checkbox:before {
  -webkit-transform: scale(0);
  transform: scale(0);
}
.label-switch input[type="checkbox"]:checked + .checkbox:after {
  -webkit-transform: translateX(22px);
  transform: translateX(22px);
}
html.android .label-switch input[type="checkbox"] + .checkbox {
  -webkit-transition-duration: 0;
  transition-duration: 0;
}
html.android .label-switch input[type="checkbox"] + .checkbox:after,
html.android .label-switch input[type="checkbox"] + .checkbox:before {
  -webkit-transition-duration: 0;
  transition-duration: 0;
}

 

 移動端調出搜索按鈕

 

1. <form> 標簽需要具有 action屬性
2. <input> 標簽需要設置 type="search"

<form action="#"> <input type="search" /> </form>

　　

 

左右布局 父類display:box布局    左邊固定寬度 width：100px   並且左邊子元素的垂直居中 右側width 自動分成1份  -webkit-box-flex: 1;

display:box還有個好處，子類不需要計算外圍寬度；為什么這么說，舉個例子；最常見的應用場景；輪播圖

以前我們總是手動計算 inner的總寬度 =outer的寬度*li的個數    還要監聽resize時的導致的寬度變化

但是 display: -webkit-box;  可以自動 計算 inner的寬度；

關鍵css如下

 .flexbox{display: -webkit-box; display: -moz-box;display:box; /*display: -webkit-flex; display: -ms-flexbox; display: flex; display: table\9;*/ }
.flexbox .flex1{-webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: table-cell\9;}

 

注意點：

父類 元素  display: -webkit-box; 子類元素 如果 inupt 之類，設置 css寬度 100% 大部分 安卓手機uc 是無效的  input 需要設置 display：block；

安卓 uc瀏覽器   calc計算   ，display: -webkit-flex ，偽元素transition，等兼容性不怎么好；

扯一下  目前為止：

安卓 uc的坑深不見底，騰訊x5的坑能看見底，但你跳下去之后就發現特么爬不上來了=_=.....不過最近qq瀏覽器好多了。uc與微信自帶瀏覽器 通病 就是緩存都比較難清理；

uc 有時候，dom 隱藏元素 display：none到block   頁面所有 字體都  放大了   需要添加  <meta name="wap-font-scale" content="no">　　

 部分手機(如三星)，a鏈接支持鼠標:visited事件，也就是說鏈接訪問后文字變為紫色

 

h5頁面input.focus()放置事件或定時器中只聚焦光標，ios不彈出軟鍵盤？

點擊A，讓B觸發focus事件。
如果直接綁定A的點擊事件，執行B.focus()，只聚焦，不彈出軟鍵盤。

試過以下方式：
1、將B.focus()放至setTimeout中，只聚焦，不彈鍵盤；
2、監聽setTimeout()延時，function中執行B.focus()，只聚焦，不彈鍵盤；
3、增加autofocus屬性，只聚焦，不彈鍵盤；

4、增加B.setSelectionRange(0,9999)，只聚焦，不彈鍵盤；

5、增加B.select()，只聚焦，不彈鍵盤；

 ipad 默認設備寬度980；部分安卓第一次 獲取設備寬度也是980；加個計時器延遲獲取寬度 或者meta添加  shrink-to-fit=no 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, shrink-to-fit=no">

 

https://forums.developer.apple.com/thread/13510

iOS下的 Fixed + Input 失效 解決辦法

參考淘寶的就好

判斷軟鍵盤彈出

• android上，當軟鍵盤狀態改變的時候，會觸發window的resize事件，所以我們可以進入頁面的時候保存一次window.innerHeight的值，當window的resize事件觸發的時候，比較window.innerHeight的值與前一次保存的window.innerHeight的值大小來判斷軟鍵盤的收攏和彈出狀態。

  var winHeight = window.innerHeight; if (isAndroid) { window.addEventListener('resize', function(e) { var tempHeight = window.innerHeight if (tempHeight < winHeight) { bShowRec = false; } else { bShowRec = true; } }); }

• ios上，軟鍵盤狀態改變的時候，不會觸發window的resize事件，但是當軟鍵盤的“完成”按鈕被點擊的時候，會觸發onblur事件。所以正常通過onfocus和onblur事件來判斷就行。

雖然Javascript是可以在水果設備上運行的，但是用戶還是可以禁用。它也會造成客戶端刷新和額外的數據傳輸，所以下面是服務器端偵測和轉向：

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
　　header('Location: http://yoursite.com/iphone');
　　exit();
}

3D Transforms origin bug, only on safari 

transition:visibility 失效

-webkit-transition:opacity .3s,visibility .3s;這樣寫 visibility 的 transition支持的不是很好，我的測試機器 三星自帶瀏覽器（安卓4.3）的，無法促發，導致其他屬性也無效；早期ios也存在 bug

+1, that's a clever solution to make this hacky "fix" only affect touch devices. – Michael Martin-Smucker Feb 26 '13 at 4:43

2

The bug (which impact iOS ≤ 7) can be fixed by specify a zero duration for visibility transition (+ correct delay): state1=opacity: 1; visibility: visible; transition: opacity 1s, visibility 0s; and state2=opacity: 0; visibility: hidden; transition: opacity 1s, visibility 0s 1s; – memsOct 6 '15 at 15:18

http://stackoverflow.com/questions/7548833/ios-css-opacity-visibility-transition 

input 的 compositionstart 和 compositionend 事件  移動端 Web 開發踩坑之旅

 

關於Android設備中，網頁端上傳操作導致瀏覽器刷新的問題

http://blog.shaochuancs.com/android-upload-page-refresh/

在最近的開發過程中，碰到一個比較疑難的bug：當在Android設備的瀏覽器中打開某張網頁時，無論是使用系統自帶的瀏覽器打開，還是用微信掃描二維碼打開，網頁中的圖片上傳功能經常會出問題。問題的具體描述為：

• 在上傳組件中(哪怕是最簡單的<input type="file">)，當選擇好本地圖片或者調取系統攝像頭拍好照片后，網頁被刷新。這一問題無法100%重現，但概率不低，在如紅米等低端安卓機上發生的概率會比較高。
• 與用系統自帶的瀏覽器打開的情況相比，在微信中打開的情況下該問題出現的更為頻繁。
• 與選擇本地圖片上傳相比，調取系統攝像頭拍照上傳的情況下該問題出現的更為頻繁。

安卓自帶瀏覽器 自定義事件 ele.addeventlistener('tap',function(){ window.open()})      無效

 css3  ios   -webkit-backdrop-filter: brightness(1.1) blur(10px); border-radius:6px;  overflow失效

其他的相關文章

移動端 Retina屏 各大主流網站1px的解決方案

 99移動端知識集合 https://github.com/jtyjty99999/mobileTech?utm_source=caibaojian.com

博客園 白樹  移動web資源整理  http://www.cnblogs.com/PeunZhang/p/3407453.html

移動端兼容問題 比較早的 http://www.cnblogs.com/surfaces/p/4502871.html

移動端資源集錦   http://caibaojian.com/mobile-tech.html

https://github.com/baijunjie/noclickdelay.js/blob/master/noclickdelay.js

 Mobile開發經驗沉淀  https://github.com/imweb/mobile/issues/2

附上代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>類似apple 菜單</title>
<meta name="viewport"   content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"  />
</head>

<body>

<style>


html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,span,img,button ,em,i,b{margin:0;padding:0;}
html{-webkit-box-sizing:border-box;margin:0 auto;min-width: 320px;height:100%;-webkit-touch-callout:none;-webkit-user-select:none;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow-x:hidden;  }
body{ height:auto;min-height:568px; font-family: Microsoft Yahei,'Helvetica Neue',Helvetica,tahoma,arial,sans-serif; text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased; line-height: 1; font-size:14px;}
article,aside,dialog,figure,footer,header,hgroup,menu,nav,section{display:block}
dl,li,menu,ol,ul{list-style:none}
address,em,i,th{font-weight:400;font-style:normal}
a{color:#999; display:block;}
a:link,a:visited{color:#999;text-decoration:none;cursor:pointer}
a:hover{cursor:pointer}
a:active,a:focus{outline:0;}
img{width:100%;border:0;vertical-align:middle;-webkit-user-select:none;}
input,select{outline:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-variant:normal}
button,input[type=button],input[type=tel],input[type=reset],input[type=submit]{line-height:normal!important;-webkit-appearance:none}
::-webkit-input-placeholder{color:#eee; text-align:center;}
.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}
.fl{float:left}
.fl,.fr{display:inline}
.fr{float:right}

.disabled { pointer-events: none; }
/*GPU hack*/
.translateZ{ -webkit-transform:translateZ(0);transform:translateZ(0); -webkit-backface-visibility:hidden;backface-visibility:hidden;}

/*背景高斯模糊*/
@supports (-webkit-backdrop-filter: none) or  (backdrop-filter: none) {
  .blurbk{
      -webkit-backdrop-filter: brightness(1.1) blur(10px);
	  backdrop-filter: brightness(1.1) blur(10px);
  }
}

.flexbox{display: -webkit-box; display: -moz-box;display:box; display: -webkit-flex; display: -ms-flexbox; display: flex; display: table\9; }
.flexbox .flex1{-webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: table-cell\9;}


/*兩端對其*/
.justify{ -webkit-box-pack: justify; -ms-flex-pack: justify; box-pack:justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
	
	
/*css 指示箭頭*/
.arrow:after {
    content: " "; display: inline-block; -webkit-transform: rotate(45deg); transform: rotate(45deg); height: 8px; width: 8px;border-width: 2px 2px 0 0;
    border-color: #c7c7cc;  border-style: solid; outline:1px solid transparent;position: absolute; right: 15px;top: 50%;margin-top: -5px;pointer-events: none;
}


/*css 1px retain*/
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution: 144dpi),(min-resolution:1.5dppx) {
.retainbb{ position:relative;}
.retainbb:after {
    content: " "; position: absolute;left: 0; bottom: 0;
    width: 100%;
    height: 1px; 
	background-color:rgba(200,199,204,.6);
    -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5);transform: scaleY(0.5);pointer-events: none;
   }
}
@media (-webkit-device-pixel-ratio:3) {
	.retainbb:after {
    -webkit-transform: scaleY(0.3333);
    transform: scaleY(0.3333);
    }
}
/**********************************************************************/

#wrap{width:100%; max-width:760px; min-height:548px;  margin:0 auto;height:auto;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:5; padding-bottom:10px; overflow:hidden; display:block; }

.nav{ height:44px; line-height:44px;background: rgba(0,0,0,0.8); color:#fff; font-size: 14px; padding:0 10px;  position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;}

.menuBtn{ position:relative; width:44px; height:44px; }


.draw,.draw::before,.draw::after{width:22px;height:1px;background:#fff;position:absolute;left:0;-webkit-backface-visibility: hidden;
-webkit-transition:-webkit-transform .5s;
 transition:transform .5s}

.draw{top:21px;left:21px;}
.draw:before{content:"";-webkit-transform: translateY(-7px); }
.draw:after{content:"";-webkit-transform: translateY(7px);}
.G_close .draw{background:transparent;}
.G_close .draw:before{-webkit-transform:translateY(0) rotate(45deg);}
.G_close .draw:after{-webkit-transform:translateY(0) rotate(-45deg);}

.draw:checked{
	-webkit-transition:-webkit-transform .5s;
}

.menu_content{ width:100%; height:100%; max-width:760px; position:fixed; left:0; right:0; margin-left:auto; margin-right:auto; top:45px;background: rgba(0,0,0,0.8); visibility:hidden; opacity:0; -webkit-transition:opacity .3s,visibility .2s,height .5s ease-out; }
.menu_content.hide{  visibility: hidden; opacity:0; z-index:0; height:0%;-webkit-transition:opacity .6s,visibility .7s,height .54s;} 	
.menu_content.show{  visibility: visible; opacity:1; z-index:99; height:100%; -webkit-backface-visibility:hidden;} 
.menu_content ul{padding:20px 10%;}
.menu_content ul li{ height:46px; line-height:46px; color:#fff; text-align:left; font-size:13px; text-indent:em;; 
        
    -webkit-animation-duration: .52s;
    animation-duration: .52s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
 	
  }
.menu_content.menu_content_animated li{
/*-webkit-animation-name: returnToNormal;
    animation-name: returnToNormal;*/
	
	-webkit-animation-name: resize;
    animation-name: resize;
	}

.menu_content ul li a{ display:block; color:#fff;}


p{ font-size:14px; text-indent:2em; padding:0 12px; color:#6d6d72; line-height:24px; margin:10px auto;}
p i{ color: #c00; font-style:normal;}





@-webkit-keyframes returnToNormal {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
 
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
 
@keyframes returnToNormal {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
 
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}                  



@-webkit-keyframes resize {
from, 60%, 75%, 90%, to {
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
  opacity: 0;
  -webkit-transform: scale(3,3);
  transform: scale(3,3);
}
100% {
  opacity: 1;
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
} 
}

@keyframes resize {
from, 60%, 75%, 90%, to {
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
  opacity: 0;
  -webkit-transform: scale(3,3);
  transform: scale(3,3);
}
100% {
  opacity: 1;
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
}
}



html,body,#wrap{ background:#efeff4}
</style>


<div id="wrap" >
<div class="nav flexbox justify">
   <div >返回</div>
   <div >Apple</div>
   <div class="menuBtn" id="j_menuBtn" title="菜單開關">
     <i class="draw"></i>
   </div>
</div>

<img src="../../loveImg/QioA-fxehfqi8208393.jpg">
<p>簡介：<i>泰勒·斯威夫特</i>（Taylor Swift），1989年12月13日出生於美國賓夕法尼亞州，美國流行音樂、鄉村音樂創作型女歌手、音樂制作人、演員、慈善家。2006年與獨立唱片公司大機器唱片簽...</p>



<style>
.list-block{ background:#fff; border-radius:5px; display:block;}
.list-block ul{ position:relative;}
.list-block ul:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #c8c7cc;
    display: block;
    z-index: 18;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
	-webkit-transform: scaleY(0.3333);transform: scaleY(0.3333);
	pointer-events: none;
}


.list-block ul:before {
 content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 1px;
    width: 100%;
    background-color: #c8c7cc;
    display: block;
    z-index: 18;
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
	-webkit-transform: scaleY(0.3333);transform: scaleY(0.3333);
	pointer-events: none;
}


.list-block li{ -webkit-box-sizing: border-box; box-sizing: border-box;position: relative; color:#666}
.list-block .item-content{
	box-sizing: border-box;
    padding-left: 15px;
    min-height: 44px;
/*    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;*/
   
    -webkit-align-items: stretch;
    align-items: stretch;}
	
	
 .list-block .item-media{ position:relative; min-width:45px;
     
	display: -webkit-box;
    display: -moz-box;
    display: box; 
	 
	 
	 /*使子元素與父元素共同高*/
	  -webkit-align-items: stretch;
    align-items: stretch;
	 
    
	 -webkit-align-self:stretch;
	 align-self:stretch;
	 
	 /* 使子元素垂直居中 */
   -webkit-justify-content:center;
	  justify-content:center;
	  
	 /* box-pack表示父容器里面子容器的水平對齊方式*/
	 -webkit-box-pack:center; 
     -ms-box-pack:center;
	 box-pack:center; 
	 
	 /*表示容器里面字容器的垂直對齊方式，*/
	 -webkit-box-align: center;
     -ms-box-align: center; 
	 box-align: center;  
	
 }	
	
.list-block .item-media img{width:50px; height:50px;}	
	
.list-block .item-inner{
	margin-left:15px;

    position: relative;
   
	padding-right: 15px;
    padding-top: 12px;
    padding-bottom:11px;
	
    min-height: 44px;

	display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    box-orient: vertical;
	
    -webkit-box-pack: Justify;
    box-pack: Justify;
	
    -webkit-box-align: start;
    box-align: start;
	
    -webkit-align-self: stretch;
    align-self: stretch;
  
 
}
.list-block .item-content:active{ background: rgba(17,17,17,.1)
}

.list-block .item-inner:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: #c8c7cc;
    z-index: 15;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
	-webkit-transform: scaleY(0.3333);transform: scaleY(0.3333);
	pointer-events: none;
}

.list-block .item-title { 
    font-weight:600; color:#666; font-size:16px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


.list-block .item-subtitle {
    font-size: 14px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis; 
}


.list-block .item-title-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
</style>
    

<div class="list-block">
   <ul>
     <li class="item-content flexbox arrow">
           <div class="item-media">
                 <img src="../../loveImg/2345.jpg">
           </div>
           <div class="item-inner flex1">
                <div class="item-title">Don't Stop Me Now</div>
                <div class="item-subtitle">Red Hot Chili Peppers</div>
           </div>
     </li>
     
     
     <li class="item-content flexbox arrow">
           <div class="item-media">
                   <img src="../../loveImg/2345.jpg">
           </div>
           <div class="item-inner flex1">
                <div class="item-title">Don't Stop Me Now</div>
                <div class="item-subtitle">Red Hot Chili Peppers</div>
           </div>
     </li>
     
     <li class="item-content flexbox arrow">
           <div class="item-media">
                   <img src="../../loveImg/2345.jpg">
           </div>
           <div class="item-inner flex1">
                 <div class="item-title-row">
                    <div class="item-title">Yellow Submarine</div>
                  </div>
                <div class="item-subtitle">Red Hot Chili Peppers</div>
           </div>
     </li>
     
     

     
   </ul>
</div>


<style>
.item-inner2{ margin:10px; background:#333; color:#fff; /*box-orient: horizontal;*/ min-height:100px;}
.item-inner2 .left{ width:90px; overflow:hidden; background:#999; 
    display: -webkit-box;
    display: -moz-box;
    display: box; 
	 
	 
	 /*使子元素與父元素共同高*/
	  -webkit-align-items: stretch;
    align-items: stretch;
	 
    
	 -webkit-align-self:stretch;
	 align-self:stretch;
	 
	 /* 使子元素垂直居中 */
   -webkit-justify-content:center;
	  justify-content:center;
	  
	 /* box-pack表示父容器里面子容器的水平對齊方式*/
	 -webkit-box-pack:center; 
     -ms-box-pack:center;
	 box-pack:center; 
	 
	 /*表示容器里面字容器的垂直對齊方式，*/
	 -webkit-box-align: center;
     -ms-box-align: center; 
	 box-align: center;
}



.item-inner2 .right{   background:red; padding:20px 0 20px 15px; text-align:left;
    display: -webkit-box;
    display: -moz-box;
    display: box;
	
    -webkit-box-orient: vertical;
    box-orient: vertical;
	
	
    /*pack 作用於上下*/
    -webkit-box-pack: Justify;
    box-pack: Justify;
	 
	 /*每個div水平 朝左*/
    -webkit-box-align: start;
    -moz-box-align: start;
    box-align: start;

}
.item-inner2 .title{ font-weight:600; }
.item-inner2 .text{overflow: hidden;

    white-space: nowrap;
    max-width: 95%;
    text-overflow: ellipsis; }
</style>
  <div class="item-inner2 flexbox">
                 <div class="item-title2 left"> <img src="../../loveImg/2345.jpg" style="width:60px"></div>
                 <div class="item-subtitle2 right  flex1">
                    <div class="title">surfaces</div>
                   <!-- <div class="text">描述空1111111111111111旦撒順路快 </div>-->
                    <div class="text">描述空112222222222211旦撒順路快 </div>
                </div>
  </div>


<div class="menu_content hide blurbk translateZ">
  <ul id="j_menutentUl" class="j_menutentUl">
    <li class="retainbb"><a class="arrow">首頁</a></li>
    <li class="retainbb"><a class="arrow">首頁</a></li>
    <li class="retainbb"><a class="arrow">首頁</a></li>
    <li class="retainbb"><a class="arrow">首頁</a></li>
    <li class="retainbb"><a class="arrow">首頁</a></li>
  </ul>

</div>
</div>



<style>
.box {
    width: 300px;
    height: 300px; margin:30px auto;
    border: 1px solid pink;
	
	 display: -webkit-box;
    display: -moz-box;
    display: box;
	
	
	-webkit-box-orient:vertical;
       box-orient:vertical;
	
	
	 /* 子元素在父元素空間中等分排列 */
    -webkit-box-pack:Justify;
    -moz-box-pack:Justify; /* firefox不支持此屬性 */
	box-pack:Justify;
	
	/* 子元素垂直居中 */
	/* -webkit-box-pack:center; 
     -ms-box-pack:center;
	 box-pack:center; 
	*/

  -webkit-box-align: center;
    -moz-box-align: center;
	box-align: center;
	
	/*   -webkit-box-align: left;
    -moz-box-align: left;
	box-align: left;*/
	
	
}
.box div {
    width: 30px;
    height: 30px;
    background-color: orange;
    border: 1px solid #ccc;
    font: 30px/30px "";
    color: #fff;
    text-align: center;
}
</style>

<div class="box">
    <div class="ch_0">0</div>
    <div class="ch_1">1</div>
    <div class="ch_2">2</div>
    <div class="ch_3">3</div>
</box>
<script>
  document.body.addEventListener('touchstart', function () { }); 
  
  var doc=document;
  var  j_menuBtn=doc.getElementById("j_menuBtn");
  var  menu_content=doc.querySelector(".menu_content");
  var menu_contentLi=menu_content.getElementsByTagName("li");
  var liLen=menu_contentLi.length;
  var j_menutentUl=doc.getElementById("j_menutentUl");
  var isHide=true;
  
  j_menuBtn.addEventListener("click",function(){
	   var that=this;   
	   if(isHide){
		  menu_content.classList.add('menu_content_animated'); 
		  that.classList.add('G_close'); 
		  menu_content.className =menu_content.className.replace('hide','show') 
		   
	  }else{
		   that.classList.remove('G_close'); 
		   menu_content.className =menu_content.className.replace('show','hide') 
		   menu_content.classList.remove('menu_content_animated'); 
		  
	  }
	 isHide=!isHide;  
	 for(var i=0;i<liLen;i++){
		 menu_contentLi[i].style.webkitAnimationDelay=0.1*i+'s';
		
	 }
	  
  });
  
  

</script>


</body>
</html>

　其他雜項 忽略

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<meta name="viewport"   content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"  />

</head>

<body>


<style>
*{ margin:0; padding:0;}
html,body{ width:100%;}
ul,li{ list-style:none;}

.box{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 43px; line-height: 42px; border-bottom: #bcbcbc 1px solid; background-color: #fafafa; color: #666; font-size: 15px; display: table\9; width: 100%;-webkit-box-sizing:border-box;box-sizing:border-box; }


.box li{text-align: center; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: table-cell\9;border-left:1px solid red;overflow: hidden; 

/*width:33.33%;*//*UC */

  text-overflow: ellipsis;
  white-space: nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;}
</style>
  
    <style>
	/*彈性模型盒*/
.webkitbox{display: -webkit-box; 
           display: -moz-box;
		   display: -ms-flexbox;
		   display: box;
		 }	
		 
.flexbox{display: -webkit-box; 
         display: -moz-box;
		 display: box; 
		 display: -ms-flexbox;
		 display: -webkit-flex; 
		 display: flex; 
		 display: table\9; 
}
.flexbox .flex1{
	-webkit-box-flex: 1; 
	   -moz-box-flex: 1; 
	        box-flex: 1;
	    -webkit-flex: 1;
		    -ms-flex: 1; 
			    flex: 1;
				display: table-cell\9;
}

.flexbox  .box-vertical-orient{  /*垂直*/
	-webkit-box-orient:vertical;        /* 兼容webkit內核 */  
    -moz-box-orient:vertical;               /* 兼容gecko內核 */  
	-ms-box-orient:vertical; 
	box-orient:vertical; 
	
	-webkit-flex-direction:column;
	-moz-flex-direction:column;
	        flex-direction:column;
}
	
	
	
	
  #fls{ 
		 
		 width:100%;
		 border:1px solid red;
     min-height: 43px; margin:30px auto; padding:10px;
     -webkit-box-sizing:border-box;box-sizing:border-box;}
  
  
   #fls .left{ 
   
 
	  /*http://caibaojian.com/demo/flexbox/align-items.html*/ 
	   
   /*適用於父類容器上) 父元素是left 使子元素im個垂直居中   設置在父元素上 ul上   是子元素 li垂直居中      <ul style="-webkit-align-items: center;">   <li></li>> >   <li></li>>   <li></li>  </ul>*/
	  -webkit-align-items: center;
    align-items: center;
	 
     	
		 
		 /*適用於彈性盒模型子元素) 作用於自己left,  與 fls，與父類fls同高   設置或檢索彈性盒子元素自身在側軸（縱軸）方向上的對齊方式。  <ul >   <li style="-webkit-align-self: center;"</li>   <li></li>>   <li></li>  </ul>*/
	 -webkit-align-self:stretch; 
	 align-self:stretch;
	 
	 /* 使子元素垂直居中*/
   -webkit-justify-content:center;  
	  justify-content:center;
	  
	 /* box-pack表示父容器里面子容器的水平對齊方式*/
	 -webkit-box-pack:center; 
	 box-pack:center; 
	 
	 /*表示容器里面字容器的垂直對齊方式，*/
	 -webkit-box-align: center;
	 box-align: center;  
    
	 
	   /* align-items: center;  2016 08 23  新增 display: flex; */
   
   width:80px; margin-right:10px; background:#999;}
   #fls .left img{ width:50px;}
  
   #fls .right{  

/* 使子元素垂直 布局*/
	
	 -webkit-box-sizing:border-box;box-sizing:border-box;
   border-left:1px solid red; padding:10px; background:#AB0D10; margin-left:10px;
      
}

#fls .right input{ height:40px;  line-height:40px; overflow: hidden; display:block; width:100%; -webkit-appearance:none; border:0; background:#eee; margin-bottom:5px;}
#fls .right div{ height:30px; line-height:30px; max-width:100%; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;} 
#fls .right p{height:20px; line-height:20px; max-width:100%; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;
   }
  </style> 
  

<ul class="box">
    <li class="cui-item cui-tab-current">中國</li>
    <li  class="cui-item">美美國222222美國國222222美國國222222美國美國</li>
    <li  class="cui-item">日本</li>
    <i   class="cui-tab-scrollbar cui-tabnum3"><span>1</span></i>
  </ul>
  
  <style>
  #bas{
  border:1px solid #000; height: 43px; line-height: 43px; margin:30px auto;
 width:100%;-webkit-box-sizing:border-box;box-sizing:border-box; }
  

   #bas li{  text-align: center;  font-size:12px;    -webkit-flex-grow:1; -webkit-flex-shrink:1;  width:100%  /*解決 文本超出 安卓瀏覽器 兼容*/
 
   border-left:1px solid red;-webkit-box-sizing:border-box;box-sizing:border-box;
   overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;}
  </style>
 
 

  <ul id="bas" class="flexbox">
     <li class="flex1 ">111111</li>
      <li class="flex1 ">2a少時誦詩書s國美222222222薩達dddd2</li>
       <li class="flex1 ">3333</li>
  </ul>
  
  
  


  <div id="fls" class="flexbox">
    <div class="left flexbox ">
        <img src="../images/3.jpg">
    </div>
     <div class="right  flex1">
    <!--<div class="right  flex1 webkitbox box-vertical-orient">-->
         <input type="text" value="222" >
         <div> 有道桌面詞典顯示文有“收縮”之意。不過”房子-x”一詞中文有“收縮”之意。不過”房子-。box子”。</div>
          <p>pppppppppppppppp”flex”一詞中文有“收縮”之意。不pppp過釋都顯得很牽強。pppp</p>
    </div>
  </div>
  
  
  
  <style>
   #fls2{ 
		 
		 width:100%;
		 border:1px solid red;
     min-height: 43px; margin:30px auto; padding:10px;
     -webkit-box-sizing:border-box;box-sizing:border-box;}
  
  
   #fls2 .left{ 
   
 
	  /*http://caibaojian.com/demo/flexbox/align-items.html*/ 
	   
   /*適用於父類容器上) 父元素是left 使子元素im個垂直居中   設置在父元素上 ul上   是子元素 li垂直居中      <ul style="-webkit-align-items: center;">   <li></li>> >   <li></li>>   <li></li>  </ul>*/
	  -webkit-align-items: center;
    align-items: center;
	 
     	
		 
		 /*適用於彈性盒模型子元素) 作用於自己left,  與 fls，與父類fls同高   設置或檢索彈性盒子元素自身在側軸（縱軸）方向上的對齊方式。  <ul >   <li style="-webkit-align-self: center;"</li>   <li></li>>   <li></li>  </ul>*/
	 -webkit-align-self:stretch; 
	 align-self:stretch;
	 
	 /* 使子元素垂直居中*/
   -webkit-justify-content:center;  
	  justify-content:center;
	  
	 /* box-pack表示父容器里面子容器的水平對齊方式*/
	 -webkit-box-pack:center; 
	 box-pack:center; 
	 
	 /*表示容器里面字容器的垂直對齊方式，*/
	 -webkit-box-align: center;
	 box-align: center;  
    
	 
	   /* align-items: center;  2016 08 23  新增 display: flex; */
   
   width:80px; margin-right:10px; background:#999;}
   #fls2 .left img{ width:50px;}
  
   #fls2 .right{  

/* 使子元素垂直 布局*/
	
	

	 -webkit-box-sizing:border-box;box-sizing:border-box;
   border-left:1px solid red; padding:10px; background:#AB0D10; margin-left:10px;
      
}

#fls2 .right input{ height:40px;  line-height:40px; overflow: hidden; display:block; width:100%; -webkit-appearance:none; border:0; background:#eee; margin-bottom:5px;}
#fls2 .right div{ height:30px; line-height:30px; max-width:100%; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;} 
#fls2 .right p{height:20px; line-height:20px; max-width:100%; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
</style>

  <div id="fls2" class="flexbox">
    <div class="left flexbox ">
        <img src="../images/3.jpg">
    </div>
   <!-- <div class="right  flex1  box-vertical-orient">-->
    <div class="right flexbox flex1  box-vertical-orient">
         <input type="text" value="222" >
         <div> 有道桌面詞典顯示文有“收縮”之意。不過”房子-x”一詞中文有“收縮”之意。不過”房子-。box子”。</div>
          <p>pppppppppppppppp”flex”一詞中文有“收縮”之意。不pppp過釋都顯得很牽強。pppp</p>
    </div>
  </div>
</body>
</html>

　

<style>
	
		   .clearfix{*zoom:1;}
		   .clearfix:after{clear:both; content:"."; display:block; height:0; visibility:hidden;}
       
			.fl{float:left; display:inline;}
			.fr{float:right; display:inline;}

			.list3{ min-height: 44px;; margin: 10px; height: auto; overflow: hidden; border: 2px solid red;;}
			.list3 .left3{ overflow: hidden;width: 300px;    max-height: 215px; margin-right: 10px;}
			.list3 .right3{ background: #eee;}
		</style>
		
		
		
		<article class="list3 clearfix">
			<div class="left3 fl" href="http://www.itvfans.com/jianjie/32775.html" title=士(Madam Secretary)" class="fancyimg home-blog-entry-thumb">
					
						<img class="box-hide box-show" src="http://img.itvfans.com/wp-content/uploads/32775.jpg?imageView2/1/w/300/h/450/q/100" data-original="http://img.itvfans.com/wp-content/uploads/32775.jpg?imageView2/1/w/300/h/450/q/100" alt="士(Madam Secretary)" style="display: block;">
		
		  </div>
				<div class="right3 clearfix">
					右邊
				</div>
			</article>

　

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<meta name="viewport"   content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"  />

</head>

<body>


<style>
*{ margin:0; padding:0;}
html,body{ width:100%;}
ul,li{ list-style:none;}

.box{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 43px; line-height: 42px; border-bottom: #bcbcbc 1px solid; background-color: #fafafa; color: #666; font-size: 15px; display: table\9; width: 100%;-webkit-box-sizing:border-box;box-sizing:border-box; }


.box li{text-align: center; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: table-cell\9;border-left:1px solid red;overflow: hidden; 
 

/*width:33.33%;*//*UC */ 
width:100%;  /*2016 1012  解決溢出 問題*/

  text-overflow: ellipsis;
  white-space: nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;}
</style>
  
  
    /*http://caibaojian.com/demo/flexbox/align-items.html*/ 
    <style>
	/*彈性模型盒*/
.webkitbox{display: -webkit-box; 
           display: -moz-box;
		   display: -ms-flexbox;
		   display: box;
		 }	
		 
.flexbox{display: -webkit-box; 
         display: -moz-box;
		 display: box; 
		 display: -ms-flexbox;
		 display: -webkit-flex; 
		 display: flex; 
		 display: table\9; 
}
.flexbox .flex1{
	-webkit-box-flex: 1; 
	   -moz-box-flex: 1; 
	        box-flex: 1;
	    -webkit-flex: 1;
		    -ms-flex: 1; 
			    flex: 1;
				display: table-cell\9;
}

.flexbox  .box-vertical-orient{  /*垂直*/  
	-webkit-box-orient:vertical;        /* 兼容webkit內核 */  
       -moz-box-orient:vertical;               /* 兼容gecko內核 */  
	    -ms-box-orient:vertical; 
	        box-orient:vertical; 
	
	-webkit-flex-direction:column;
	   -moz-flex-direction:column;
	    -ms-flex-direction:column;
	        flex-direction:column;
}
	
	
	
	/*使子元素 左右居中  上下垂直居中*/
.children_center{ -webkit-align-items: center;
				   align-items: center;     
			-webkit-align-self:stretch;
					align-self:stretch;
	   -webkit-justify-content:center; 
			   justify-content:center;
			  -webkit-box-pack:center;
					  box-pack:center;
			 -webkit-box-align: center;
			         box-align: center;
	
}	
	
	
	
  #fls{ 
		 
		 width:100%;
		 border:1px solid red;
     min-height: 43px; margin:30px auto; padding:10px;
     -webkit-box-sizing:border-box;box-sizing:border-box;}
  
  
   #fls .left{ 
   
  display: -webkit-box; 
		   display: box;
		    display: -webkit-flex; 
			 display:flex; 
	
	   
   /*適用於父類容器上) 父元素是left 使子元素im個垂直居中   設置在父元素上 ul上   是子元素 li垂直居中      <ul style="-webkit-align-items: center;">   <li></li>> >   <li></li>>   <li></li>  </ul>*/
	  -webkit-align-items: center;
    align-items: center;
	 
     	
		 
		 /*適用於彈性盒模型子元素) 作用於自己left,  與 fls，與父類fls同高   設置或檢索彈性盒子元素自身在側軸（縱軸）方向上的對齊方式。  <ul >   <li style="-webkit-align-self: center;"</li>   <li></li>>   <li></li>  </ul>*/
	 -webkit-align-self:stretch; 
	 align-self:stretch;
	 
	 /* 使子元素垂直居中*/
   -webkit-justify-content:center;  
	  justify-content:center;
	  
	 /* box-pack表示父容器里面子容器的水平對齊方式*/
	 -webkit-box-pack:center; 
	 box-pack:center; 
	 
	 /*表示容器里面字容器的垂直對齊方式，*/
	 -webkit-box-align: center;
	 box-align: center;  
    
	 
	   /* align-items: center;  2016 08 23  新增 display: flex; */
   
   width:80px; margin-right:10px; background:#999;}
   #fls .left img{ width:50px;}
  
   #fls .right{  

/* 使子元素垂直 布局*/
	
	 -webkit-box-sizing:border-box;box-sizing:border-box;
   border-left:1px solid red; padding:10px; background:#AB0D10; margin-left:10px;
      
}

#fls .right input{ height:40px;  line-height:40px; overflow: hidden; display:block; width:100%; -webkit-appearance:none; border:0; background:#eee; margin-bottom:5px;}
#fls .right div{ height:30px; line-height:30px; max-width:100%; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;} 
#fls .right p{height:20px; line-height:20px; max-width:100%; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;
   }
  </style> 
  

<ul class="box">
    <li class="cui-item cui-tab-current">中國</li>
    <li  class="cui-item">美美國222222美國國222222美國國222222美國美國</li>
    <li  class="cui-item">日本</li>
    <i   class="cui-tab-scrollbar cui-tabnum3"><span>1</span></i>
  </ul>
  
  <style>
  #bas{
  border:1px solid #000; height: 43px; line-height: 43px; margin:30px auto;
 width:100%;-webkit-box-sizing:border-box;box-sizing:border-box; }
  

   #bas li{  text-align: center;  font-size:12px;    -webkit-flex-grow:1; -webkit-flex-shrink:1;
 
   border-left:1px solid red;-webkit-box-sizing:border-box;box-sizing:border-box;
   overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;}
  </style>
 
 

  <ul id="bas" class="flexbox">
     <li class="flex1 ">111111</li>
      <li class="flex1 ">2a少時誦詩書s國美222222222薩達dddd2</li>
       <li class="flex1 ">3333</li>
  </ul>
  
  
  


  <div id="fls" class="flexbox">
    <div class="left " style="min-height:150px;">
        <img src="../images/3.jpg">
    </div>
     <div class="right  flex1 " style="position:relative; display:block; background:#ddd; height: auto; overflow: hidden;">
    <!--<div class="right  flex1 webkitbox box-vertical-orient">-->
         <input type="text" value="222" >
         <div> 有道桌面詞典顯示文有“收縮”之意子”。</div>
          <p style="position:absolute; bottom:0; left:0; display:block;">pppppppppppppppp”flex”一詞中文有“收縮”之意。不pppp過釋都顯得很牽強。pppp</p>
    </div>
  </div>
  
  
  
  <style>
   #fls2{ 
		 
		 width:100%;
		 border:1px solid red;
     min-height: 43px; margin:30px auto; padding:10px;
     -webkit-box-sizing:border-box;box-sizing:border-box;}
  
  
   #fls2 .left{ 
  
 
	  /*http://caibaojian.com/demo/flexbox/align-items.html*/ 
	   
   /*適用於父類容器上) 父元素是left 使子元素im個垂直居中   設置在父元素上 ul上   是子元素 li垂直居中      <ul style="-webkit-align-items: center;">   <li></li>> >   <li></li>>   <li></li>  </ul>*/
	  -webkit-align-items: center;
    align-items: center;
	 
     	
		 
		 /*適用於彈性盒模型子元素) 作用於自己left,  與 fls，與父類fls同高   設置或檢索彈性盒子元素自身在側軸（縱軸）方向上的對齊方式。  <ul >   <li style="-webkit-align-self: center;"</li>   <li></li>>   <li></li>  </ul>*/
	 -webkit-align-self:stretch; 
	 align-self:stretch;
	 
	 /* 使子元素垂直居中*/
   -webkit-justify-content:center;  
	  justify-content:center;
	  
	 /* box-pack表示父容器里面子容器的水平對齊方式*/
	 -webkit-box-pack:center; 
	 box-pack:center; 
	 
	 /*表示容器里面字容器的垂直對齊方式，*/
	 -webkit-box-align: center;
	 box-align: center;  
    
	 
	   /* align-items: center;  2016 08 23  新增 display: flex; */
   
   width:80px; margin-right:10px; background:#999;}
   #fls2 .left img{ width:50px;}
  
   #fls2 .right{  

/* 使子元素垂直 布局*/
	
	

	 -webkit-box-sizing:border-box;box-sizing:border-box;
   border-left:1px solid red; padding:10px; background:#AB0D10; margin-left:10px;
      
}

#fls2 .right input{ height:40px;  line-height:40px; overflow: hidden; display:block; width:100%; -webkit-appearance:none; border:0; background:#eee; margin-bottom:5px;}
#fls2 .right div{ height:30px; line-height:30px; max-width:100%; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;} 
#fls2 .right p{height:20px; line-height:20px; max-width:100%; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
</style>

  <div id="fls2" class="flexbox">
    <div class="left flexbox ">
        <img src="../images/3.jpg">
    </div>
   <!-- <div class="right flexbox  flex1  box-vertical-orient">-->
    <div class="right  flex1  " style="position:relative; display:block; background:#ddd; height: auto; overflow: hidden;">
         <input type="text" value="222" >
         <div> 有道桌面詞典顯示文有“收縮”之意。不過”房子-x”一詞中文有“收縮”之意。不過”房子-。box子”。</div>
          <p>pppppppppppppppp”flex”一詞中文有“收縮”之意。不pppp過釋都顯得很牽強。pppp</p>
    </div>
  </div>
  
  
  
     上面  style="position:relative; display:block; background:#ddd; height: auto; overflow: hidden;">中的
 overflow: hidden;  影響 ios10
  
  
  
  
		<style>
	
		   .clearfix{*zoom:1;}
		   .clearfix:after{clear:both; content:"."; display:block; height:0; visibility:hidden;}
       
			.fl{float:left; display:inline;}
			.fr{float:right; display:inline;}

			.list3{ min-height: 44px;; margin: 10px; height: auto; overflow: hidden; border: 2px solid red;;}
			.list3 .left3{ overflow: hidden;width: 300px;    max-height: 215px; margin-right: 10px;}
			.list3 .right3{ background: #eee;}
		</style>
		
		
		
		<article class="list3 clearfix">
			<div class="left3 fl" href="http://www.itvfans.com/jianjie/32775.html" title="國務卿女士(Madam Secretary)" class="fancyimg home-blog-entry-thumb">
					
						<img class="box-hide box-show" src="http://img.itvfans.com/wp-content/uploads/32775.jpg?imageView2/1/w/300/h/450/q/100" data-original="http://img.itvfans.com/wp-content/uploads/32775.jpg?imageView2/1/w/300/h/450/q/100" alt="國務卿女士(Madam Secretary)" style="display: block;">
		
		  </div>
				<div class="right3 clearfix">
					右邊
				</div>
			</article>
</body>
</html>