Gap som ikke fungerer i Safari: 3 måter å enkelt fikse det på

Hvem setter ikke pris på det når nettlesere implementerer nye CSS-funksjoner? Noen ganger fungerer imidlertid ikke visse funksjoner, for eksempel kolonnegapet, i Safari.

Gap-egenskapen er et forsøk på å gi en egenskap som ligner på CSS-nettet og flexbox. Den vil ha ansvaret for mellomrommet (rennene) mellom kolonner og rader.

Enkelte nettlesere, inkludert Safari, aktiverer imidlertid ikke gap-egenskapen når du bruker flex-oppsettet. Dette er ikke det eneste problemet med nettleseren, og mange rapporterte det Safari kan ikke laste ned en fil, men vi dekket det problemet i en egen guide.

Fungerer gap i Safari?

Hvis kolonnegapet eller rutenettgapet ikke fungerer i Safari, er det mest sannsynlig fordi du bruker en Safari-versjon mindre enn 14.

Rad-gap og kolonne-gap støttes nå i Flexbox-beholdere i Safari 14.1. Denne oppdateringen gjør det mulig for flexbox å bli brukt i webdesign uten behov for vanskelige marginhakk.

Men hvis kolonnegapet ikke fungerer i Safari, er det måter å fikse det på.

Støttes Flexbox Gap i alle nettlesere?

De fleste moderne nettlesere støtter flexbox. Flere nettlesere har en eksperimentell implementering av flexbox. Å bruke et leverandørprefiks var standardprosedyren for å utvikle eksperimentelle implementeringer.

Dette problemet påvirker bare Safari før versjon 15.4, men hvis du bruker denne eller en nyere versjon, har du ingen problemer.

Nå som du vet mer om denne funksjonen, la oss se hva vi kan gjøre hvis grid-gap ikke fungerer i Safari.

Raskt tips:

Enkelt sagt kan du løse dette nettstedsproblemet med gap-kolonner eller rader ved ganske enkelt å bytte nettleseren til Opera.

Denne løsningen løser ikke problemet på Safari, men leverer fortsatt optimalisert navigasjon med støtte for gap-egenskaper og mange integreringsfunksjoner.

Opera

Naviger uten feil på hvilken som helst nettside ved hjelp av avanserte funksjoner og tilgjengelighet.

Gratis Besøk nettsiden

Hvordan fikser jeg gapet hvis det ikke fungerer på Safari?

1. Oppdater Safari til den nyeste versjonen

1. Å velge Systemvalg fra eple menyen i hjørnet av skjermen.
   
2. Klikk på Programvare oppdatering.
   
3. Vent til Mac-en foretar en oppdateringssjekk.
4. Klikk Oppgrader nå hvis det er noen tilgjengelige oppdateringer.
   
5. Merk av for alternativet merket Hold Mac-en min automatisk oppdatert for å få macOS- og Safari-oppgraderinger automatisk.
6. Vent til eventuelle oppdateringer er installert på Mac-en.

Denne løsningen er ikke en Safari flex gap-løsning, og den vil permanent fikse problemet på datamaskinen din.

2. Løsning for Flex gap

1. Åpne CSS-filen.
2. Legg nå til det ønskede elementet følgende kode:
display: rutenett;
rutenett-gap: 8rem;
gap: 8rem;
   
3. Lagre endringer.

Hvis CSS flex gap ikke fungerer, kan du fikse dette problemet ved å bruke en løsning. Det er ingen støtte for Flexbox i Safari mindre enn 14.

Grid gap støttes i tidligere Safari-versjoner; derfor vil bytte fra display flex til grid være å foretrekke.

3. Bruk den lobotomiserte uglevelgeren

1. Åpne CSS-filen i din favorittredigerer.
2. Legg nå til denne kodelinjen:.parent_div>*+* { margin-left: 8rem;}

   

3. Lagre endringer.

En uvanlig tre-karakters CSS-velger eksisterer i form av den lobotomiserte uglevelgeren. Fordi den har en uhyggelig likhet med en ugles tomme utseende, kalles den den lobotomiserte uglevelgeren.

Hva kan jeg bruke i stedet for gap i CSS?

I stedet for å bruke gap i CSS 3, kan du bruke margin-right i CSS 3. Hvis gapet ikke fungerer i det hele tatt i Safari, kan du følge de ovennevnte løsningene for å fikse dette problemet.

Imidlertid ser det ut til at gap-problemet er løst i de nyere versjonene av Safari, så du trenger ikke å ty til løsninger lenger.

Hvis gapet ikke fungerer i Safari, vil det beste alternativet være å oppdatere nettleseren din, men hvis det ikke er et alternativ, må du ty til løsninger.

Dette er et problem på klientsiden, men mange hadde problemer på serversiden, for eksempel server sluttet å svare Safari meldinger, men disse kan også fikses.

Klarte du å fikse gapet i Safari? Fortell oss hvilken løsning som fungerte for deg.