伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

CSS3彈性布局怎么兼容IE（11）？

2018-3-16    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里 

彈性布局（Flexbox）確實為我們構(gòu)建復(fù)雜、靈活的布局帶來了很大的便利，但是它的兼容性確實讓人很頭痛，下面是我遇到的一個問題：

理想效果：

IE11效果：

html大概結(jié)構(gòu)：

[html] view plain copy
  1. <div class="box">  
  2.     <div class="input-container">  
  3.         <input />  
  4.         <div class="tooltip"></div>  
  5.     </div>  
  6.     <button></button>  
  7. </div>  

這里大致說一下css，input-container寬高沒設(shè)死，由input決定，并設(shè)置position: relative;相對定位，并采用display: flex;彈性布局。tooltip設(shè)置絕對定位，通過top調(diào)整垂直位置，由input-container的彈性布局屬性設(shè)置水平居中（是不是覺得我很作死，為什么不直接用絕對定位就把垂直水平都搞定了。哈哈，一切源于一顆裝B+傻B的心，不過，能實際體會一下flexbox帶來的問題，我覺得也挺好的）。


結(jié)果在chrome下正常，IE11下就成上圖那樣了，我上MDN Web看了一下，說彈性布局是支持IE11的（下圖），但是從上圖來看，IE下垂直方向是對的，但是水平方向卻不對，說明flexbox還是沒被支持，我也嘗試著添加了各種前綴，還是不行。

藍(lán)藍(lán)設(shè)計( cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日歷

鏈接

個人資料

存檔

黄浦区| 济源市| 南木林县| 米泉市| 沐川县| 黑龙江省| 上犹县| 新蔡县| 巴马| 阿克苏市| 土默特左旗| 呼伦贝尔市| 色达县| 肃南| 杂多县| 大丰市| 鹤岗市| 嫩江县| 景宁| 临泽县| 广河县| 晴隆县| 鄯善县| 台湾省| 楚雄市| 平安县| 南充市| 三江| 安达市| 汕头市| 安仁县| 忻城县| 渝北区| 丹阳市| 乌兰县| 神农架林区| 隆回县| 长寿区| 清新县| 榕江县| 莎车县|