我一直在使用Flexbox自动对齐一个效果很好的菜单,我非常喜欢这个CSS功能。但是,菜单显然在IE8中不起作用,实际上在IE 9中消失了。
是否有任何纯CSS解决方案,而不是使用Javascript,也许还有我见过的名为Modernizer的东西?
#cssmenu ul {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
/* Default CSS from Shop stylesheet */
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="cssmenu">
<ul>
<li><a href="/menu1">Menu 1</a>
</li>
<li><a href="/menu2">Menu 2</a>
</li>
<li><a href="/menu3">Menu 3</a>
</li>
<li><a href="/menu4">Menu 4</a>
</li>
<li><a href="/menu5">Menu 5</a>
</li>
<li><a href="/menu6">Menu 6</a>
</li>
</ul>
</div>