我是 flexbox 的新手,我的问题如下:
我的导航栏上有一个子菜单绝对定位并使用 flexbox。
在 Chrome/Firefox 中一切正常,没有测试 Safari。
IE11 正在显示我的子菜单,但它的子元素溢出(这破坏了我的 :hover
)。
在 IE 中检查此代码笔以查看问题(简化版):
https://codepen.io/CamilleVerrier/pen/GvLojN
我尝试了很多 StackOverflow 或 CanIUse 中建议的方法,比如单独设置 flex 属性:
ul.sub-menu li {
flex-grow:0;
flex-shrink:1;
flex-basis:0px;
}
但是好像不行。
在我的测试中,我发现如果我删除 position:absolute
,一切都会恢复正常(但我的菜单显然会中断)。
那么...返回 inline-block 或 float 的解决方案是什么? (请不要啊)
谢谢! (对不起我的英语)
/* General styles */
body {
background: tomato;
font-size: 1.2rem;
font-weight: bold
}
a {
color: black;
text-decoration: none;
}
li {
list-style: none;
}
ul li {
font-size: 1.6rem;
display: inline-block;
margin-left: 40px;
text-transform: uppercase;
}
ul li.menu-metier {
position: relative;
padding-bottom: 25px;
}
/* SubMenu */
ul.sub-menu {
display: -webkit-box;
display: flex;
display: -ms-flexbox;
position: absolute;
background: white;
top: 45px;
left: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
ul.sub-menu li {
margin: 10px;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
ul.sub-menu li a {
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
ul.sub-menu li a img {
padding: 0;
margin-bottom: 5px;
align-self: center;
}
ul.sub-menu li a span {
text-align: center;
font-size: 1rem;
align-self: center;
}
<ul>
<li><a href="#"><span>Accueil</span></a></li>
<li class="menu-metier"><a href="#"><span>Notre métier</span></a>
<ul class="sub-menu">
<li>
<a href="#">
<img width="170" height="102" src="http://lorempixel.com/170/102">
<span>Séminaire et Incentive</span>
</a>
</li>
<li>
<a href="#">
<img width="170" height="102" src="http://lorempixel.com/170/102">
<span>Congrès et rencontres</span>
</a>
</li>
<li>
<a href="#">
<img width="170" height="102" src="http://lorempixel.com/170/102">
<span>Communication Design</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<span>L’agence</span>
</a>
</li>
<li>
<a href="#">
<span>Photos</span>
</a>
</li>
</ul>
最佳答案
问题与 flexbox 无关。
这是浏览器之间绝对定位渲染变化的问题。
当您在元素上设置 position: relative
时,它会为具有 position: absolute
的后代设置边界框。
在 Chrome 中,绝对定位的后代可以溢出边界框。
在 IE11 中,它们不是。一旦达到边界框的限制,绝对定位的元素就会被切断。
一种解决方法是从容器中删除 position: relative
。现在绝对定位的子菜单有一个更大的边界框(基于最近定位的祖先,或者如果不存在,则初始包含 block (即视口(viewport)))。
ul li.menu-metier {
/* position: relative; */
padding-bottom: 25px;
}
另一种解决方法是调整右
偏移量以适应内容。
ul.sub-menu {
right: -600px;
}
您也可以尝试设置宽度。
这些选项都不漂亮。但话又说回来,我们正在处理 IE。
您可能会通过搜索找到其他解决方法。
关于css - 具有绝对位置的 Flexbox 容器不适合 IE 中的内容宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46049818/