Anchor Tag muß nicht auf Safari Breite des Textes nehmen

Für eine Weile, ich versuche, dies zu implementieren, wo ein Anker-Tag in ein Flex-Box Container ist mit flex-wrap: nowrap und overflow:auto jetzt das funktioniert in Google Chrome, aber es doesn Arbeiten Sie nicht in Safari für kleinere Bildschirmgrößen sowie Iphone. Es folgt der Code

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

Quelle

2016-07-16 Priyank Bhatt

Welche Version von Safari? –

Safari Version 9.1.1 (11601.6.17). Ich habe auch den Screenshot beigefügt. –

starten .. Auch habe ich nicht verwendeten CSS entfernt.

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

Quelle

2016-07-16 20:03:48

Danke, das hat das Problem behoben. Kannst du erklären, wie das Setzen von 'flex: none' das Problem behoben hat? –

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

Anchor Tag muß nicht auf Safari Breite des Textes nehmen

Antwort

Verwandte Themen