淄博阎囤工贸有限公司

CSS3彈性布局怎么兼容IE(11)?

2018-3-16    seo達人

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

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

理想效果:

IE11效果:

html大概結構:

[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寬高沒設死,由input決定,并設置position: relative;相對定位,并采用display: flex;彈性布局。tooltip設置絕對定位,通過top調整垂直位置,由input-container的彈性布局屬性設置水平居中(是不是覺得我很作死,為什么不直接用絕對定位就把垂直水平都搞定了。哈哈,一切源于一顆裝B+傻B的心,不過,能實際體會一下flexbox帶來的問題,我覺得也挺好的)。


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

藍藍設計m.ibut.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://m.ibut.com.cn

存檔

宁强县| 镇赉县| 宝应县| 抚宁县| 县级市| 吉安县| 双辽市| 汝州市| 法库县| 长岭县| 剑河县| 乌什县| 襄垣县| 漳平市| 石河子市| 连平县| 开原市| 山西省| 韩城市| 嵊泗县| 通山县| 佳木斯市| 宝丰县| 阿图什市| 湘乡市| 台前县| 巩义市| 平利县| 孟村| 湖州市| 福鼎市| 古交市| 南汇区| 澳门| 阿克苏市| 双桥区| 桐城市| 康乐县| 金华市| 高安市| 衡山县|