2016-08-23 18 views
-1

これはとてもうんざりです。私は誰かが助けることを望んでいる数十の "修正"を試みました。私は、Safari(iOSとデスクトップ)ではなく、ChromeとIEではうまく動作するフレックスボックスを持っています。Safariでフレックスボックスが動作しない

CSS:

.resulist40 { 
    list-style: none; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    float:clear; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
     -ms-flex-direction: column; 
      flex-direction: column; 
    -ms-flex-wrap: wrap; 
     flex-wrap: wrap; 
    height: 350px; 
    width: initial; 

} 
.reslist40 { 
    -webkit-box-flex: 1; 
     -ms-flex: 1; 
      flex: 1; 
    min-height: 34px; 
} 

HTML:ここ

<ul class="resulist40"> 
      <li class="reslist40"> 
       <a onclick="dovid(1);">Day 1</a> 
      </li> 
      <li class="reslist40"> 
      </li>... 
</ul> 

は(CHROME)から目的の外観は、次のとおりです。ここで enter image description here

は、Safariで次のようになります。

enter image description here

+0

票が下がってもコメントはありませんか?私は何を供給しなかったのですか? –

答えて

0

これは私の修正です。私は100%満足していません。 Safariは幅が固定されていなくてもうまく動作しないようです - フレックスボックスは本当に反応しません。 130pxの幅ですべてのブラウザで3 colsが得られることがわかりました。

.resulist40 { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
     -ms-flex-direction: row; 
      flex-direction: row; 
    -ms-flex-wrap: wrap; 
     flex-wrap: wrap; 
    width: 100%; 
    padding-left: 10px; 
} 
.reslist40 { 
    list-style: none; 
    display: inline-block; 
    width: 130px; 
    height: 34px; 
    text-align: left; 
} 
関連する問題