簡體   English   中英

Flex CSS在IE 11中不起作用

[英]Flex CSS not working in IE 11

我有一個正在處理的響應菜單,該菜單使用flex css來制作div堆棧。 由於主要div需要一些JavaScript,因此我將它們包含在兩個容器中。 我的問題是,主要div的絕對位置為寬度的95%,在內部,我有一個容器div,其相對位置為95%,並設置為顯示:flex和該div內的div。 (下圖所示)問題是在IE 11中,柔性顯示無法正常工作,並且寬度超出了容器div的寬度,並且沒有包裹。 我已經包含了代碼。 請告知,因為這可在所有其他瀏覽器,ipad,此站點等上使用。此代碼段在此處有效,但不在此站點上....謝謝您,如有造成任何混淆,我們深表歉意。

 .col_full { width:100%; } .maindiv { margin:4px 10px; position:absolute; display:show; /* shows on hover */ text-align:left; padding:20px; border:1px solid #777777; border-top:none; left:0; right:0; z-index:100; width:95%; } .containerdiv { position: relative; width:100%; margin:auto; text-align:center; display: flex; flex-wrap: wrap; flex: 1; justify-content: center; align-items: top; flex-direction: row; overflow: auto; } .divs { max-width:260px; position:relative; flex-grow: 1; padding: 15px 15px 50px 15px; margin:15px; text-align:left; overflow:hidden; } 
 <div class="maindiv"><div class="containerdiv"> <div class="col_full"> <h2>Header Goes Here</h2> </div> <div class="cb"></div> <div class="divs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis imperdiet mauris, a faucibus nibh sollicitudin et. Maecenas ac tincidunt ligula. Praesent ornare mi consequat est fringilla, ac semper ante lacinia. Integer ultricies massa sit amet dui accumsan tincidunt. Duis eget metus vitae odio lacinia fermentum sit amet sed nibh. Phasellus volutpat nulla in ex ullamcorper congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris justo lectus, ullamcorper eget lacinia at, convallis et lorem. </div> <div class="divs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis imperdiet mauris, a faucibus nibh sollicitudin et. Maecenas ac tincidunt ligula. Praesent ornare mi consequat est fringilla, ac semper ante lacinia. Integer ultricies massa sit amet dui accumsan tincidunt. Duis eget metus vitae odio lacinia fermentum sit amet sed nibh. Phasellus volutpat nulla in ex ullamcorper congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris justo lectus, ullamcorper eget lacinia at, convallis et lorem. </div> <div class="divs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis imperdiet mauris, a faucibus nibh sollicitudin et. Maecenas ac tincidunt ligula. Praesent ornare mi consequat est fringilla, ac semper ante lacinia. Integer ultricies massa sit amet dui accumsan tincidunt. Duis eget metus vitae odio lacinia fermentum sit amet sed nibh. Phasellus volutpat nulla in ex ullamcorper congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris justo lectus, ullamcorper eget lacinia at, convallis et lorem. </div> <div class="divs"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis imperdiet mauris, a faucibus nibh sollicitudin et. Maecenas ac tincidunt ligula. Praesent ornare mi consequat est fringilla, ac semper ante lacinia. Integer ultricies massa sit amet dui accumsan tincidunt. Duis eget metus vitae odio lacinia fermentum sit amet sed nibh. Phasellus volutpat nulla in ex ullamcorper congue. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris justo lectus, ullamcorper eget lacinia at, convallis et lorem. </div> </div> 

該示例代碼正在工作,但不在實際站點上。 我不得不將顯示更改為可在maindiv上懸停時彎曲,這解決了該問題。 實際的頁面使用了大量的CSS和js來使頁面以我想要的方式顯示,因此我無法在此處提供所有代碼。 我感謝所有幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM