Gap nu funcționează în Safari: 3 moduri de a-l remedia cu ușurință

Cine nu apreciază când browserele implementează noi funcții CSS? Cu toate acestea, uneori anumite caracteristici, cum ar fi decalajul coloanei, nu funcționează în Safari.

Proprietatea gap este un efort de a oferi o proprietate similară grilei CSS și casetei flexibile. Acesta se va ocupa de spațiul (jgheaburi) dintre coloane și rânduri.

Cu toate acestea, anumite browsere, inclusiv Safari, nu activează proprietatea gap atunci când utilizează aspectul flexibil. Aceasta nu este singura problemă cu browserul și mulți au raportat asta Safari nu poate descărca un fișier, dar am acoperit această problemă într-un ghid separat.

Funcționează gap în Safari?

Dacă decalajul de coloană sau decalajul de grilă nu funcționează în Safari, cel mai probabil este pentru că utilizați o versiune Safari mai mică de 14.

Row-gap și column-gap sunt acum acceptate în containerele Flexbox în Safari 14.1. Această actualizare face posibil ca flexbox să fie utilizat în design web fără a fi nevoie de hack-uri incomode ale marjelor.

Dar dacă coloana-gap nu funcționează în Safari, există modalități de a-l remedia.

Flexbox Gap este acceptat în toate browserele?

Majoritatea browserelor moderne acceptă flexbox. Mai multe browsere web au o implementare experimentală a flexbox. Utilizarea unui prefix de furnizor a fost procedura standard pentru dezvoltarea implementărilor experimentale.

Această problemă afectează numai Safari înainte de versiunea 15.4, dar dacă utilizați această versiune sau orice versiune mai nouă, nu aveți probleme.

Acum că știți mai multe despre această funcție, să vedem ce putem face dacă grid-gap nu funcționează în Safari.

Sfat rapid:

Mai simplu spus, puteți rezolva această problemă a site-ului cu coloane sau rânduri decalaje prin simpla schimbare a browserului la Opera.

Această soluție nu rezolvă problema în Safari, dar oferă totuși o navigare optimizată, cu suport pentru proprietățile lacune și o mulțime de funcții de integrare.

Operă

Navigați fără erori pe orice pagină web folosind funcții avansate și accesibilitate.

Gratuit Vizitati site-ul

Cum repar decalajul dacă nu funcționează pe Safari?

1. Actualizați-vă Safari la cea mai recentă versiune

1. Selectați Preferințe de sistem de la Măr meniul din colțul ecranului.
   
2. Click pe Actualizare de software.
   
3. Așteptați ca Mac să efectueze o verificare a actualizării.
4. Clic Imbunatateste acum dacă există actualizări accesibile.
   
5. Verificați opțiunea etichetată Ține-mi automat Mac-ul actualizat pentru a obține automat actualizări pentru macOS și Safari.
6. Așteptați ca orice actualizări să fie instalate pe Mac.

Această soluție nu este o soluție Safari flex gap și va rezolva permanent problema de pe computer.

2. Soluție pentru distanța flexibilă

1. Deschideți fișierul CSS.
2. Acum adăugați la elementul dorit următorul cod:
afisare: grila;
grid-gap: 8rem;
decalaj: 8rem;
   
3. Salvează modificările.

Dacă decalajul CSS flex nu funcționează, puteți remedia această problemă folosind o soluție. Nu există suport pentru Flexbox în Safari mai puțin de 14.

Grid Gap este acceptat în versiunile anterioare de Safari; prin urmare, trecerea de la flexul de afișare la grilă ar fi de preferat.

3. Folosiți selectorul de bufnițe lobotomizate

1. Deschideți fișierul CSS în editorul dvs. preferat.
2. Acum adăugați această linie de cod:.parent_div>*+* { margin-left: 8rem;}

   

3. Salvează modificările.

Există un selector CSS neobișnuit de trei caractere sub forma selectorului de bufnițe lobotomizate. Deoarece poartă o asemănare ciudată cu aspectul vacu al unei bufnițe, se numește selector de bufnițe lobotomizate.

Ce pot folosi în loc de gap în CSS?

În loc să utilizați gap în CSS 3, puteți folosi margin-dreapta în CSS 3. Dacă gap nu funcționează deloc în Safari, puteți urma soluțiile menționate mai sus pentru a remedia această problemă.

Cu toate acestea, problema decalajului pare să fie rezolvată în versiunile mai noi de Safari, așa că nu va mai trebui să recurgeți la soluții alternative.

Dacă decalajul nu funcționează în Safari, cea mai bună opțiune ar fi să vă actualizați browserul, dar dacă aceasta nu este o opțiune, atunci va trebui să recurgeți la soluții alternative.

Aceasta este o problemă la nivelul clientului, dar mulți au avut probleme la nivelul serverului, cum ar fi serverul nu mai răspunde Safari mesaje, dar și acestea pot fi remediate.

Ați reușit să remediați problema decalajului în Safari? Spune-ne ce soluție a funcționat pentru tine.