我试图使2个元素垂直显示.这应该可行,但在firefox 21上,元素水平显示.
任何人都知道为什么以及如何解决它？
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 50%;
display: -moz-box;
-moz-flex-direction: column;
}
#p1
{
border:1px solid red;
}
#p2
{
border:1px solid blue;
}
</style>
</head>
<body>
<div>
<div id="p1">item1</div>
<div id="p2">item2</div>
</div>
</body>
</html>
Dav*_*rey 10
你正在混合语法.您已使用旧语法(这是Firefox目前支持的)启用了flexbox,但您尝试使用新语法使它们垂直.
你需要使用 -moz-box-orient: vertical;
div {
width: 50%;
display: -moz-box;
-moz-box-orient: vertical;
}
Firefox很快就会使用最新的语法(没有前缀),所以你也应该包含它.此语法也适用于IE11,Opera和Chrome(在这种情况下使用-webkit-前缀).
您还应该使用-webkit前缀添加旧语法,以便它可以在Safari中使用.IE10还支持稍微不同的语法:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;