Gab, der ikke fungerer i Safari: 3 måder at løse det nemt på

Hvem sætter ikke pris på det, når browsere implementerer nye CSS-funktioner? Nogle gange virker visse funktioner, såsom spaltegabet, dog ikke i Safari.

Gabet-egenskaben er et forsøg på at give en egenskab, der ligner CSS-gitteret og flexbox. Det vil være ansvarlig for rummet (tagrender) mellem kolonner og rækker.

Visse browsere, inklusive Safari, aktiverer dog ikke gap-egenskaben, når du bruger flex-layoutet. Dette er ikke det eneste problem med browseren, og mange rapporterede det Safari kan ikke downloade en fil, men vi dækkede det problem i en separat vejledning.

Virker gap i Safari?

Hvis kolonnemellemrummet eller gittergabet ikke fungerer i Safari, er det højst sandsynligt, fordi du bruger en Safari-version mindre end 14.

Row-gap og column-gap er nu understøttet i Flexbox-containere i Safari 14.1. Denne opdatering gør det muligt for flexbox at blive brugt i webdesign uden behov for akavede margin hacks.

Men hvis kolonne-gabet ikke virker i Safari, er der måder at rette det på.

Er Flexbox Gap understøttet i alle browsere?

De fleste moderne browsere understøtter flexbox. Flere webbrowsere har en eksperimentel implementering af flexbox. Brug af et leverandørpræfiks var standardproceduren for udvikling af eksperimentelle implementeringer.

Dette problem påvirker kun Safari før version 15.4, men hvis du bruger denne eller en nyere udgivelse, har du ingen problemer.

Nu hvor du ved mere om denne funktion, lad os se, hvad vi kan gøre, hvis grid-gap ikke virker i Safari.

Hurtigt tip:

Kort sagt kan du løse dette webstedsproblem med mellemrumskolonner eller rækker ved blot at skifte din browser til Opera.

Denne løsning løser ikke problemet på Safari, men leverer stadig optimeret navigation med understøttelse af gap-egenskaber og masser af integrationsfunktioner.

Opera

Naviger uden fejl på enhver webside ved hjælp af avancerede funktioner og tilgængelighed.

Ledig Besøg hjemmesiden

Hvordan løser jeg hullet, hvis det ikke virker på Safari?

1. Opdater din Safari til den nyeste version

1. Vælg Systempræferencer fra Æble menuen i hjørnet af din skærm.
   
2. Klik på Software opdatering.
   
3. Vent på, at Mac'en foretager et opdateringstjek.
4. Klik Opgrader nu hvis der er tilgængelige opdateringer.
   
5. Marker den mærkede indstilling Hold automatisk min Mac opdateret for at få macOS- og Safari-opgraderinger automatisk.
6. Vent på, at eventuelle opdateringer er installeret på din Mac.

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

2. Flex gap løsning

1. Åbn din CSS-fil.
2. Tilføj nu følgende kode til det ønskede element:
display: gitter;
gitter-gab: 8rem;
mellemrum: 8rem;
   
3. Gem ændringer.

Hvis CSS flex gap ikke virker, kan du løse dette problem ved at bruge en løsning. Der er ingen understøttelse af Flexbox i Safari mindre end 14.

Grid gap er understøttet i tidligere Safari-versioner; derfor vil skift fra display flex til grid være at foretrække.

3. Anvend den lobotomiserede uglevælger

1. Åbn CSS-filen i din foretrukne editor.
2. Tilføj nu denne kodelinje:.parent_div>*+* { margin-left: 8rem;}

   

3. Gem ændringer.

En usædvanlig tre-karakters CSS-vælger findes i form af den lobotomiserede uglevælger. Fordi den har en uhyggelig lighed med en ugles tomme udseende, kaldes den den lobotomiserede uglevælger.

Hvad kan jeg bruge i stedet for gap i CSS?

I stedet for at bruge gap i CSS 3, kan du bruge margin-right i CSS 3. Hvis gapet slet ikke virker i Safari, kan du følge de ovennævnte løsninger for at løse dette problem.

Imidlertid ser gapproblemet ud til at være løst i de nyere versioner af Safari, så du behøver ikke længere at ty til løsninger.

Hvis hullet ikke virker i Safari, ville den bedste mulighed være at opdatere din browser, men hvis det ikke er en mulighed, så bliver du nødt til at ty til løsninger.

Dette er et problem på klientsiden, men mange havde problemer på serversiden, såsom server holdt op med at svare Safari beskeder, men disse kan også rettes.

Formåede du at løse problemet med gapet i Safari? Fortæl os, hvilken løsning der virkede for dig.