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>
在Chrome和IE11中，我看起来都一样。你的意思是不同的？ – LGSon
https://stackoverflow.com/q/35111090/3597276 –
我在IE11上测试过但没有发现任何问题？ 另外，'.maindiv {display：show}'应该是'.maindiv {display：block}'，不知道这是不是你遇到的问题的原因。 – Takebo