Aukko ei toimi Safarissa: 3 tapaa korjata se helposti

Kukapa ei arvostaisi, kun selaimet ottavat käyttöön uusia CSS-ominaisuuksia? Joskus tietyt ominaisuudet, kuten sarakeväli, eivät kuitenkaan toimi Safarissa.

Gap-ominaisuus on yritys tarjota CSS-ruudukon ja flexboxin kaltainen ominaisuus. Se vastaa sarakkeiden ja rivien välisestä tilasta (kourut).

Tietyt selaimet, mukaan lukien Safari, eivät kuitenkaan ota käyttöön väliominaisuutta käytettäessä joustavaa asettelua. Tämä ei ole ainoa ongelma selaimessa, ja monet ilmoittivat siitä Safari ei voi ladata tiedostoa, mutta käsitimme tämän ongelman erillisessä oppaassa.

Toimiiko aukko Safarissa?

Jos sarakeväli tai ruudukon aukko ei toimi Safarissa, se johtuu todennäköisesti siitä, että käytät Safari-versiota, joka on alle 14.

Riviväli ja sarakeväli ovat nyt tuettuja Safari 14.1:n Flexbox-säiliöissä. Tämä päivitys mahdollistaa flexboxin käytön web-suunnittelussa ilman hankalia marginaaleja.

Mutta jos sarakeväli ei toimi Safarissa, on olemassa tapoja korjata se.

Onko Flexbox Gap tuettu kaikissa selaimissa?

Useimmat nykyaikaiset selaimet tukevat flexboxia. Useilla selaimilla on kokeellinen flexbox-toteutus. Toimittajan etuliitteen käyttäminen oli vakiomenettely kokeellisten toteutusten kehittämisessä.

Tämä ongelma koskee vain Safaria ennen versiota 15.4, mutta jos käytät tätä tai mitä tahansa uudempaa julkaisua, sinulla ei ole ongelmia.

Nyt kun tiedät enemmän tästä ominaisuudesta, katsotaan mitä voimme tehdä, jos grid-gap ei toimi Safarissa.

Nopea vinkki:

Yksinkertaisesti sanottuna voit ratkaista tämän verkkosivuston ongelman välisarakkeilla tai riveillä vaihtamalla selaimesi Operaan.

Tämä kiertotapa ei korjaa ongelmaa Safarissa, mutta tarjoaa silti optimoidun navigoinnin aukko-omaisuuden tuella ja monilla integrointiominaisuuksilla.

Ooppera

Navigoi ilman virheitä millä tahansa verkkosivulla edistyneiden ominaisuuksien ja esteettömyysominaisuuksien avulla.

Vapaa Vieraile verkkosivustolla

Kuinka korjaan aukon, jos se ei toimi Safarissa?

1. Päivitä Safari uusimpaan versioon

1. Valitse Järjestelmäasetukset alkaen Omena valikkoa näytön kulmassa.
   
2. Klikkaa Ohjelmistopäivitys.
   
3. Odota, että Mac tekee päivitystarkistuksen.
4. Klikkaus Päivitä nyt jos saatavilla on päivityksiä.
   
5. Tarkista merkitty vaihtoehto Pidä Macini automaattisesti päivitettynä saada macOS- ja Safari-päivitykset automaattisesti.
6. Odota, että päivitykset asennetaan Maciin.

Tämä ratkaisu ei ole Safari flex gap -kiertotapa, ja se korjaa pysyvästi tietokoneesi ongelman.

2. Flex rap -kiertotapa

1. Avaa CSS-tiedostosi.
2. Lisää nyt seuraava koodi haluttuun elementtiin:
näyttö: ruudukko;
ristikkoväli: 8 rem;
rako: 8 rem;
   
3. Tallenna muutokset.

Jos CSS flex gap ei toimi, voit korjata tämän ongelman käyttämällä kiertotapaa. Flexboxia ei tueta Safarissa, joka on alle 14.

Grid gap on tuettu aiemmissa Safari-versioissa; siksi vaihtaminen näytön joustavasta ruudukkoon olisi parempi.

3. Käytä lobotomisoitua pöllönvalitsinta

1. Avaa CSS-tiedosto suosikkieditorissasi.
2. Lisää nyt tämä koodirivi:.parent_div>*+* { margin-left: 8rem;}

   

3. Tallenna muutokset.

Epätavallinen kolmimerkkinen CSS-valitsin on olemassa lobotomisoidun pöllön valitsimen muodossa. Koska se muistuttaa järjettömästi pöllön tyhjää ilmettä, sitä kutsutaan lobotomisoiduksi pöllön valitsimeksi.

Mitä voin käyttää CSS: n aukon sijasta?

Sen sijaan, että käyttäisit aukkoa CSS 3:ssa, voit käyttää marginaalioikeaa CSS 3:ssa. Jos aukko ei toimi ollenkaan Safarissa, voit korjata ongelman noudattamalla edellä mainittuja ratkaisuja.

Kuiluongelma näyttää kuitenkin olevan korjattu Safarin uudemmissa versioissa, joten sinun ei enää tarvitse turvautua kiertotapaan.

Jos aukko ei toimi Safarissa, paras vaihtoehto olisi päivittää selaimesi, mutta jos se ei ole vaihtoehto, sinun on turvauduttava kiertotapaan.

Tämä on asiakaspuolen ongelma, mutta monilla oli palvelinpuolen ongelmia, kuten palvelin lakkasi vastaamasta Safari viestejä, mutta myös ne voidaan korjata.

Onnistuitko korjaamaan aukko-ongelman Safarissa? Kerro meille, mikä ratkaisu toimi sinulle.