2018-3-16 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
彈性布局（Flexbox）確實(shí)為我們構(gòu)建復(fù)雜、靈活的布局帶來(lái)了很大的便利，但是它的兼容性確實(shí)讓人很頭痛，下面是我遇到的一個(gè)問(wèn)題：
理想效果：
IE11效果：
html大概結(jié)構(gòu)：
這里大致說(shuō)一下css，input-container寬高沒(méi)設(shè)死，由input決定，并設(shè)置position: relative;相對(duì)定位，并采用display: flex;彈性布局。tooltip設(shè)置絕對(duì)定位，通過(guò)top調(diào)整垂直位置，由input-container的彈性布局屬性設(shè)置水平居中（是不是覺(jué)得我很作死，為什么不直接用絕對(duì)定位就把垂直水平都搞定了。哈哈，一切源于一顆裝B+傻B的心，不過(guò)，能實(shí)際體會(huì)一下flexbox帶來(lái)的問(wèn)題，我覺(jué)得也挺好的）。
結(jié)果在chrome下正常，IE11下就成上圖那樣了，我上MDN Web看了一下，說(shuō)彈性布局是支持IE11的（下圖），但是從上圖來(lái)看，IE下垂直方向是對(duì)的，但是水平方向卻不對(duì)，說(shuō)明flexbox還是沒(méi)被支持，我也嘗試著添加了各種前綴，還是不行。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.gerard.com.cn