Anchor Tag не принимает ширину текста на сафари

Некоторое время я пытаюсь реализовать это где якорь тег находится внутри контейнера коробки прогибается, имеющий flex-wrap: nowrap и overflow:auto теперь это работает в Google Chrome, но это Безразлично Не работайте в сафари для меньшего размера экрана, а также для 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 Version 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 –

Anchor Tag не принимает ширину текста на сафари

ответ

Смежные вопросы