定位標記犯規採取文本的寬度在Safari

有一段時間，我想實現這其中一個錨標記裏面有flex-wrap: nowrap和overflow:auto柔性箱集裝箱現在這個工作在谷歌瀏覽器，但它不不會在Safari瀏覽器中使用較小的屏幕尺寸以及Iphone。以下是代碼

<html> 
<head> 
</head> 
    <style> 
     .flex-div { 
      display: -webkit-box; 
      display: -webkit-flex; 
      display: -ms-flexbox; 
      display: flex; 
      -webkit-box-orient: horizontal; 
      -webkit-box-direction: normal; 
      -webkit-flex-direction: row; 
      -ms-flex-direction: row; 
      flex-direction: row; 
      -webkit-flex-wrap: nowrap; 
      -ms-flex-wrap: nowrap; 
      flex-wrap: nowrap; 
      overflow-x: auto; 
     } 
     .flex-div a { 
      display: inline-block; 
      white-space: nowrap; 
      margin-left: 10px; 
      margin-right: 10px; 
     } 
    </style> 
<body> 
    <div class="flex-div"> 
     <a>Modern & contemporary</a> 
     <a>Modern & contemporary</a> 
     <a>Modern & contemporary</a> 
     <a>Modern & contemporary</a> 
     <a>Modern & contemporary</a> 
     <a>Modern & contemporary</a> 
     <a>Modern & contemporary</a> 
     <a>Modern & contemporary</a> 
     <a>Modern & contemporary</a> 
     <a>Modern & contemporary</a> 
     <a>Modern & contemporary</a> 
     <a>Modern & contemporary</a> 

    </div> 
</body>

來源

2016-07-16 Priyank Bhatt

哪個版本的Safari？ –

Safari版本9.1.1（11601.6.17）。我也附上了截圖。 –

試試這個..我也已經刪除未使用的CSS。

.flex-div { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: horizontal; 
 
    overflow-x: auto; 
 
} 
 
.flex-div a { 
 
    white-space: nowrap; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    -ms-flex: none; 
 
    -webkit-flex: none; 
 
    flex: none; 
 
}

<div class="flex-div"> 
 
    <a>Modern & contemporary</a> 
 
    <a>Modern & contemporary</a> 
 
    <a>Modern & contemporary</a> 
 
    <a>Modern & contemporary</a> 
 
    <a>Modern & contemporary</a> 
 
    <a>Modern & contemporary</a> 
 
    <a>Modern & contemporary</a> 
 
    <a>Modern & contemporary</a> 
 
    <a>Modern & contemporary</a> 
 
    <a>Modern & contemporary</a> 
 
    <a>Modern & contemporary</a> 
 
    <a>Modern & contemporary</a> 
 
</div>

來源

2016-07-16 20:03:48

謝謝你解決了這個問題。你能解釋一下如何設置'flex：none'來解決這個問題。 –

https://bugs.webkit.org/show_bug.cgi?id=136041#c2 –

定位標記犯規採取文本的寬度在Safari

回答

相關問題