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

2018-3-16 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

弹性布局(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还是没被支持,我也尝试着添加了各种前缀,还是不行。

sunbet设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: SS3弹性布局怎么兼容IE(11)?


Powered by emlog 京ICP备12006971号-1 sitemap