2017-06-04 258 views
1

我有一個響應菜單,我正在使用的是使用flex css來製作div堆棧。由於主div上需要一些javascript,因此我將它們包含在兩個容器中。我的問題是主div是絕對位置95%的寬度,裏面我有一個相對位置爲95%的容器div,並設置爲顯示:flex和div。 (下圖)問題是,在IE 11中,flex顯示器不工作,寬度擴展超出容器div寬度而不是包裝。我已經包含了代碼。請指教,因爲這適用於所有其他瀏覽器,ipad,本網站等。代碼片段在這裏工作,但不在網站上....謝謝你,並對任何混淆抱歉。Flex CSS在IE中不起作用11

.col_full { 
 
\t 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; 
 
\t left:0; 
 
\t right:0; 
 
\t z-index:100; 
 
    width:95%; \t 
 
} 
 

 
.containerdiv { 
 
\t position: relative; 
 
\t width:100%; 
 
\t margin:auto; 
 
\t text-align:center; 
 
\t display: flex; 
 
    flex-wrap: wrap; 
 
\t flex: 1; 
 
\t justify-content: center; 
 
    \t align-items: top; 
 
    flex-direction: row; 
 
\t overflow: auto; 
 
} 
 

 
.divs { 
 
\t max-width:260px; 
 
\t position:relative; 
 
\t flex-grow: 1; 
 
\t padding: 15px 15px 50px 15px; 
 
\t margin:15px; 
 
\t text-align:left; 
 
\t overflow:hidden; 
 
}
<div class="maindiv"><div class="containerdiv"> 
 
\t 
 
\t \t <div class="col_full"> 
 
\t \t \t <h2>Header Goes Here</h2> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="cb"></div> 
 
\t \t 
 
\t \t <div class="divs"> 
 
\t \t \t 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. 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="divs"> 
 
\t \t \t 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. 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="divs"> 
 
\t \t \t 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. 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="divs"> 
 
\t \t \t 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. 
 
\t \t </div> 
 
\t \t \t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t </div>

+0

在Chrome和IE11中,我看起來都一樣。你的意思是不同的? – LGSon

+0

https://stackoverflow.com/q/35111090/3597276 –

+0

我在IE11上測試過但沒有發現任何問題? 另外,'.maindiv {display:show}'應該是'.maindiv {display:block}',不知道這是不是你遇到的問題的原因。 – Takebo

回答

0

的示例代碼是工作而不是實際的網站。我不得不在maindiv上懸停時將顯示更改爲flex,並解決了問題。實際的頁面使用大量的CSS和js來讓頁面以我想要的方式顯示,並且我無法在此處提供所有代碼。我感謝所有的幫助。