12

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

1 に答える 1

12

構文が混在しています。古い構文 (Firefox が現在サポートしているもの) で flexbox を有効にしましたが、新しい構文でそれらを垂直にしようとしました。

使用する必要があります-moz-box-orient: vertical;

div {
    width: 50%;
    display: -moz-box;
    -moz-box-orient: vertical;
}

http://jsfiddle.net/TPf3P/

Firefox はすぐに最新の構文 (プレフィックスなし) を使用するため、それも含める必要があります。この構文は、IE11、Opera、および Chrome でも機能します (この場合は -webkit- プレフィックスを使用)。

また、Safari で機能するように、-webkit プレフィックスを使用して古い構文を追加する必要があります。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;

http://jsfiddle.net/TPf3P/1/

于 2013-05-31T06:02:19.873 に答える