Question

我有一个响应式菜单，我正在使用flex css来制作divs堆栈。由于主div上需要一些javascript，我将它们包含在两个容器中。我的问题是主div是95％宽度与绝对位置，在我有一个容器div与相对位置为95％并设置为display：flex，并在此div内div。（下图）问题是在IE 11中，flex显示器不工作，宽度扩展超出容器div宽度而不是包装。我已经包含了代码。请告知，因为这适用于所有其他浏览器，ipad，在这个网站上等。代码片段在这里工作，但不在网站上....谢谢你，抱歉任何混乱。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

示例代码正在运行但不在实际网站上。我不得不在悬停在maindiv上时将显示更改为flex，这解决了这个问题。实际的页面使用了很多CSS和js来让页面显示我想要的方式，我无法在这里提供所有代码。我感谢所有的帮助。

Flex CSS无法在IE 11中运行

1 个答案: