Internet Explorer je problem koji uništava živote većine web programera. Više od 60% vremena razvoja može se potrošiti na rješavanje ovih specifičnih problema, što nije slučaj učinkovitu upotrebu vrijeme. U ovom ću članku govoriti o najpopularnijim bugovima i nedosljednostima u pozicioniranju, kao i o tome kako najlakše riješiti te probleme.

1. Pozicioniranje središta.

Svaki web programer, prilikom postavljanja web stranice, suočio se s potrebom poravnanja elementa u sredini. Najjednostavniji i popularan način- margina za pisanje: auto; . Ova metoda omogućuje centriranje elementa bez obzira na razlučivost zaslona. Međutim, ova metoda ne radi u IE6.

Razmotrite sljedeći kôd:

#container (obrub: čvrsti 1px #000; pozadina: #777; širina: 400px; visina: 160px; margina: 30px 0 0 30px; ) #element (pozadina: #95CFEF; obrub: čvrsti 1px #36F; širina: 300px; visina: 100 piksela; margina: 30 piksela automatski)

Očekivani rezultat:

Međutim, Internet Explorer će vam pokazati sljedeće:

To se događa jer IE6 ne prepoznaje automatsku vrijednost postavljenu na svojstvo margine. Srećom, to je lako popraviti.

Popravimo to.

Najjednostavniji i dokazana metoda Centrirati element u IE6 znači napisati text-alignL center na nadređenom elementu i primijeniti tex-align: lijevo na njega samog tako da je njegov sadržaj ispravno poravnat.

#spremnik( granica: čvrsta 1px #000; pozadina: #777; širina: 400px; visina: 160px; margina: 30px 0 0 30px; poravnanje teksta: središte;) #element( pozadina: #95CFEF; granica: čvrsta 1px #36F; širina: 300px; visina: 100px; margina: 30px 0; poravnanje teksta: lijevo; }

2. Efekt koraka

Gotovo svaki programer koristi popise za stvaranje navigacije. Obično se kreira element spremnika, unutar njega se nalaze potrebne veze, a zatim se svojstvo float postavlja sa potrebnim smjerom. Razmotrite sljedeći primjer:

Ul ( list-style: none; ) ul li a ( display: block; width: 130px; height: 30px; text-align: center; color: #fff; float: left; background: #95CFEF; border: solid 1px # 36F;margina: 30px 5px)

Dobivamo sljedeće:

Međutim, IE će nam pokazati:

Nije baš prijateljska navigacija, zar ne? Međutim, postoje 2 načina za ispravljanje ovog neugodnog ponašanja.

1. metoda

Najjednostavniji način je postaviti svojstvo float ne na veze, već na elemente liste li.

Ul li (lebdi: lijevo;)

2. metoda

Drugi način je primijeniti svojstvo display: inline na li element. Osim toga, ispravljamo grešku s dvostrukom marginom, koja je opisana u nastavku.

Ul li (prikaz: inline)

3. Dvostruko uvlačenje za elemente s postavljenim svojstvom float

Ovu je pogrešku vrlo lako reproducirati. Postavite element na plutanje: lijevo i zatim padding. Kao rezultat toga, dobivamo udubljenje dvostruko veće od navedenog.

Pogledajmo primjer:

#element( background: #95CFEF; width: 300px; height: 100px; float: left; margin: 30px 0 0 30px; border: solid 1px #36F; )

Očekivani rezultat:

Međutim, u IE6 vidjet ćemo sljedeće:

Mi to popravljamo

Ovo se ispravlja na isti način kao i problem s učinkom koraka. To jest, postavljamo svojstvo display: inline za element. Naš kod će se promijeniti ovako:

#element( background: #95CFEF; width: 300px; height: 100px; float: left; margin: 30px 0 0 30px; border: solid 1px #36F; prikaz: inline; }

4. Elementi s malom visinom.

Ponekad je potrebno izraditi elemente male visine, na primjer koristiti ih kao element dizajna. Prvi način koji mi je pao na pamet je postaviti visinu. Međutim, IE će vam pokazati nešto sasvim drugačije od onoga što očekujete.

Rezultat je element visine 2 px i ruba 1 px.

Popravimo to.

Razlog za ovaj bug je vrlo jednostavan: IE jednostavno mijenja visinu elementa na visinu jednaku veličini fonta. Dakle, jednostavno postavljamo veličinu fonta na nulu.

#element( pozadina: #95CFEF; granica: čvrsta 1px #36F; širina: 300px; visina: 2px; margina: 30px 0; veličina fonta: 0; }

Drugi pristup

Još dobar način- ovo je korištenje svojstva overflow, morate primijeniti skrivenu vrijednost. I tada će element biti potrebne visine.

#element( pozadina: #95CFEF; granica: čvrsta 1px #36F; širina: 300px; visina: 2px; margina: 30px 0; preljev: skriven; }

5. Preljev i relativno pozicioniranje elemenata.

Ova se pogreška pojavljuje kada nadređeni element ima postavljeno svojstvo overflow: auto, a dijete je postavljeno u odnosu na njega, to jest, postavljeno je na pozicija imovine: relativno . Ispostavilo se da element djeteta nalazi se, takoreći, na vrhu roditelja. Pogledajmo primjer:

#element( background: #95CFEF; border: solid 1px #36F; width: 300px; height: 150px; margin: 30px 0; overflow: auto; ) #anotherelement( background: #555; width: 150px; height: 175px; position : relativna; margina: 30px )

Očekivani rezultat:

Rezultat u IE:

Popravimo to.

Najjednostavniji način rješavanja problema je postavljanje nadređenog elementa relativno pozicioniranje.

#element( background: #95CFEF; border: solid 1px #36F; width: 300px; height: 150px; margin: 30px 0; overflow: auto; položaj: relativan; }

6. Model kutije

Internet Explorer pogrešno tumači okvirni model.

Na primjer, postoje 2 div element. Jedan s ispravljenom greškom, a drugi ne. Bit će razlika u veličini između njih jednaka zbroju unutarnjih podstava.

Mi to popravljamo

Reći ću vam o ispravnom modelu u drugom članku, ali sada ću vam samo pokazati kako ga popraviti.

Poanta je da se za IE5/6 visinu i širinu mora postaviti zasebno. Na primjer, ja to radim ovako:

Za sve preglednike

#element( širina: 400px; visina: 150px; padding: 50px; )

Za IE trebate učiniti sljedeće:

#element (širina: 400px; visina: 150px; \visina: 250px; \širina: 500px)

U biti dodajete vrijednosti dopune dimenzijama elementa za IE6.

7. Postavljanje minimalnih veličina.

Minimalna širina i visina jednostavno su nezamjenjive pri izvođenju prekrasan dizajn. Nažalost, IE zanemaruje svojstva min-height i min-width.

Mi to popravljamo

Da riješimo problem, upotrijebimo identifikator!important.

#element ( min-height: 150px; height: auto !important; height: 150px; )

Druga opcija.

Ako uzmemo u obzir činjenicu da IE ne razumije ugniježđene selektore, onda možemo učiniti ovo:

#element ( min-height: 150px; height: 150px; ) html>body #element ( height: auto; )

8. Neispravno ponašanje u modelu plovka.

Jedan od najvažnijih koncepata u rasporedu bez tablice koji koristi CSS je float. Većinu vremena IE6 to ispravno rješava, ali ponekad postoje problemi. Na primjer, kada se sadržaj ne razbija ili je širina elementa veća od širine nadređenog. U tim slučajevima oznaka se prekida. Pogledajmo primjer.

#element, #anotherelement( background: #95CFEF; border: solid 1px #36F; width: 100px; height: 150px; margin: 30px; padding: 10px; float: left; ) #container( background: #C2DFEF; border: solid 1px #36F; margina: 30px; preljev: automatski)

Dobio sam u IE:

Kao što vidite, prvi div se proširio kako bi odgovarao širini sadržaja i gurnuo susjedni u sljedeći redak.

Mi to popravljamo

Ne postoji lijepo rješenje. Ali možete, na primjer, primijeniti svojstvo overflow: hidden, ali tada će sadržaj biti odrezan i dio njega neće biti vidljiv.

#element( pozadina: #C2DFEF; obrub: čvrsti 1px #36F; širina: 365px; margina: 30px; ispuna: 5px; preljev: skriven; )

9. Dodatni razmak između stavki popisa.

IE 6 dodaje dodatno punjenje okomitim popisima. Pogledajmo primjer.

• Link 1
• Veza 2
• Veza 3

Ul ( margin:0; padding:0; list-style:none; ) li a ( background: #95CFEF; display: block; )

Kako bi trebao izgledati:

Što IE pokazuje:

1. metoda

Najlakši način je odrediti širinu ili visinu veze.

Li a ( pozadina: #95CFEF; prikaz: blok; širina: 200px; }

2. metoda

Sljedeći način je postaviti float: lijevo i zatim ga izbrisati.

Li a (pozadina: #95CFEF; plutajuće: lijevo; jasno: lijevo; }

3. metoda

Treći način je postaviti display: inline na li element. Što će, usput, popraviti gore opisanu pogrešku dvostruke margine.

Korištenje margin:auto za vodoravno centriranje elementa bloka je dobro poznata metoda. Ali jeste li se ikada zapitali kako to funkcionira?

Učinak auto ovisi o vrsti elementa i kontekstu. Za gornji dio, CSS auto može značiti jednu od dvije stvari: zauzeti sve slobodan prostor ili 0 piksela. Ovisno o tome bit će specificirana drugačija struktura.

"auto" - zauzimaju sav raspoloživi prostor

Ovo je najčešći način korištenja auto za uvlačenje. Ako postavimo auto za lijevo i desno padding jednog elementa, oni će ravnomjerno zauzeti sav horizontalni prostor dostupan u spremniku. Ovo će postaviti element u središte.

Pogledaj primjer

Ovo radi samo za vodoravnu podlogu. Ali neće raditi za plutajuće i umetnute elemente. I također za apsolutno i fiksno pozicionirane elemente.

Simulirajte plutajuće ponašanje dodjeljivanjem dostupnog prostora

auto ravnomjerno raspoređuje sav slobodni prostor između desne i lijeve margine. No, što se događa ako ovu vrijednost postavimo samo za jedno punjenje? Tada će zauzeti sav raspoloživi prostor, a element će biti pomaknut na desni ili lijevi rub.

Pogledaj primjer

“auto” — postavite 0 piksela

Kao što je gore spomenuto, auto ne radi za lebdeće, umetnute ili apsolutno pozicionirane elemente. Oni već imaju definiranu strukturu, tako da nema smisla koristiti margin auto.

To će samo poremetiti izvornu strukturu. Uključujući CSS za uvlačenje teksta na vrhu. Stoga će auto postaviti ispunu ovih elemenata na 0 piksela.

auto također neće raditi na standardnom blok elementu osim ako nema specificiranu širinu. U svim primjerima koje sam dao, elementi su imali specificiranu širinu.

Vrijednost auto će definirati ispunu od 0 piksela kada je širina blok elementa postavljena na auto ili 100% . Obično zauzima cijelu širinu spremnika, tako da će za širinu ispune ostati 0 piksela.

Što se događa s okomitim razmakom kada se postavi na automatski?

auto za CSS gornje i donje ispune uvijek se računa kao 0 piksela ( isključujući apsolutno pozicionirane elemente). W3C specifikacija navodi sljedeće:

"Ako su 'margin-top' ili 'margin-bottom' postavljeni na 'auto', postavljeni su na 0."

To je zbog činjenice da su na web stranici svi elementi najčešće raspoređeni okomito. Stoga, centriranjem visine elementa u spremniku nećemo postići činjenicu da će izgledati okomito centrirano u odnosu na samu stranicu, kao što se događa s horizontalnim centriranjem.

Ili je to možda iz istog razloga zbog kojeg su odlučili dodati iznimku za apsolutno pozicionirane elemente koji se mogu okomito centrirati u odnosu na ukupnu visinu stranice.

Ili zato učinak kombiniranja uvlaka (spajanje uvlaka susjedni elementi ). Ovo je još jedna iznimka od ovog pravila određivanje vertikalnih odmaka.

Centriranje apsolutno pozicioniranih elemenata

Budući da postoji iznimka za apsolutno pozicionirane elemente, možete koristiti auto da ih centrirate okomito i vodoravno. Ali prvo moramo otkriti kada će margin:auto funkcionirati na taj način za CSS gornje ispune.

Druga W3C specifikacija kaže:

“Ako su sva tri položaja (“lijevo”, “širina” i “desno”) postavljena na “automatski”, prvo postavite “margin-lijevo” i “margin-desno” na 0...
» Ako je "auto" navedeno samo za "margin-left" i "margin-right", riješite jednadžbu s dodatni uvjet tako da obje podloge imaju istu širinu."

Ovdje je detaljno opisana situacija u vezi s automatskom vrijednošću za vodoravno ispunjavanje. Kako bi se osiguralo da su ovi ispuni iste veličine, lijevo, širina i desno ne smiju biti postavljeni na automatski ( njihovu zadanu vrijednost). Za vodoravno centriranje elementa potrebno je postaviti određenu vrijednost za širinu apsolutno pozicioniranog elementa, a lijevo i desno moraju imati jednake vrijednosti.

U specifikaciji također spomenuto nešto slično za gornje popunjavanje CSS div.

"Ako su "vrh", "visina" i "dno" postavljeni na "automatski", postavite "vrh" na statično..."

"Ako jedan od tri položaja nije postavljen na 'auto': Ako su 'vrh' i 'dno' postavljeni na 'automatski', riješite jednadžbu s dodatnim uvjetom za postavljanje ovih ispuna na iste vrijednosti."

Stoga, za okomito centriranje apsolutno pozicioniranog elementa, vrh, visina i dno ne smiju biti postavljeni na auto.

Sada, kada sve ovo saberemo, dobivamo sljedeće:

Pogledaj primjer

Zaključak

Ako trebate pomaknuti element na stranici udesno ili ulijevo bez elemenata spremnika ( na primjer, kao u slučaju float), zapamtite da je moguće koristiti auto za uvlačenje.

Pretvaranje elementa u apsolutno pozicioniran samo da bi se okomito centrirao ( vrh padding CSS), Ne najbolja ideja. Postoje druge opcije kao što su flexbox i CSS transformacija koje su prikladnije za to.

Prijevod članka " CSS – margin auto – Kako to radi“ pripremio je prijateljski projektni tim.

Dobro Loše

Opis

Postavlja količinu ispune od svakog ruba elementa. Margina je prostor od granice trenutnog elementa do unutarnje granice njegovog nadređenog elementa (slika 1).

Riža. 1. Uvlaka od lijevog ruba elementa

Ako element nema roditelja, ispuna će biti udaljenost od ruba elementa do ruba prozora preglednika, uzimajući u obzir da sam prozor također ima ispunu postavljenu prema zadanim postavkama. Da biste ih se riješili, trebali biste postaviti vrijednost margine za birač jednaka nuli.

Svojstvo margine omogućuje vam da postavite vrijednost margine za sve strane elementa odjednom ili da je definirate samo za određene strane.

Sintaksa

margina: [vrijednost | kamata | auto] (1,4) | naslijediti

Vrijednosti

Možete koristiti jednu, dvije, tri ili četiri vrijednosti, odvojene razmakom. Učinak ovisi o broju vrijednosti i prikazan je u tablici. 1.

Količina uvlačenja može se odrediti u pikselima (px), postotku (%) ili drugim prihvatljivim vrijednostima. CSS jedinice. Vrijednost može biti pozitivan ili negativan broj.

Auto Određuje da će preglednik automatski izračunati količinu uvlake.

inherit Nasljeđuje vrijednost roditelja.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Proizlaziti ovaj primjer

prikazano na sl. 2.

Objektni model

document.getElementById("elementID ").style.margin

Preglednici

Internet Explorer 6 u quirk modu ne podržava centriranje bloka pomoću margine: 0 automatsko pravilo. Također postoji greška u ovom pregledniku s udvostručavanjem lijeve ili desne vrijednosti ispune za plutajuće elemente ugniježđene unutar nadređenih elemenata. Margina koja je uz matičnu stranu je udvostručena. Problem se obično rješava dodavanjem display: inline plutajućem elementu.

Inačice Internet Explorera do i uključujući 7.0 ne podržavaju vrijednost nasljeđivanja.

Bilješka

U blok elementi smještene jedna pored druge okomito, uočava se učinak kolapsa kada se uvlake ne zbrajaju, već se međusobno kombiniraju. Sam kolaps djeluje na dva ili više blokova (jedan se može ugniježditi u drugi) s uvlakama na vrhu ili dnu, dok se susjedne uvlake spajaju u jednu. Za lijevo i desno ispunjavanje, sažimanje se nikada ne primjenjuje.

Sažimanje ne radi:

• za elemente koji imaju svojstvo padding postavljeno na stranu sažimanja.
• za elemente koji imaju granicu navedenu na strani koja se urušava;
• na elementima sa apsolutno pozicioniranje, tj. oni čiji je položaj postavljen kao apsolutan;
• na plutajućim elementima (za koje je svojstvo float postavljeno na lijevo ili desno);
• za inline elemente;
• Za .

Općenito centriranje HTML elementi na stranici - ovo nije teška stvar. U nekim slučajevima... web programeri moraju razbijati glavu kako bi pronašli najbolje rješenje.

Horizontalno centriranje elemenata nije tako teško; okomito već postavlja pitanja, ali njihovo kombiniranje općenito može biti zbunjujuće. U eri adaptivni dizajn, rijetko nam je jasno koje su točne dimenzije pojedinih elemenata. Izbrojao sam 6 na razne načine centriranje elemenata sa koristeći CSS. Počnimo s jednostavni primjeri, završimo sa složenijima. Radit će s istim HTML kodom:

Horizontalno poravnanje pomoću poravnanja teksta

Ponekad je najjednostavnije rješenje najbolje:

Div.center ( poravnanje teksta: središte; pozadina: hsl(0, 100%, 97%); ) div.center img ( širina: 33%; visina: automatski; )

Ovdje nema okomitog centriranja: za ovo ćete morati dodati svojstva margin-top i margin-bottom u div.

Centriranje s marginom: auto

Drugo rješenje za horizontalno poravnanje:

Div.center ( pozadina: hsl(60, 100%, 97%); ) div.center img ( prikaz: blok; širina: 33%; visina: auto; margina: 0 auto; )

Imajte na umu da za ovu metodu trebate postaviti svojstvo display: block.

Centriranje pomoću ćelije tablice

Korištenjem display: table-cell, možemo osigurati da je element centriran i okomito i vodoravno. Ali ovdje moramo ugnijezditi sliku u drugi div element.

Poravnano u sredini ( prikaz: tablica; pozadina: hsl(120, 100%, 97%); širina: 100%; ) .središnja jezgra ( prikaz: ćelija tablice; poravnanje teksta: središte; okomito poravnanje: sredina; ) .center-core img (širina: 33%; visina: automatski; )

Da bi sve radilo ispravno, div treba postaviti na width: 100%. Za okomito centriranje elementa koristit ćemo standardne tehnike postavljanjem visine. Radi posvuda, uključujući IE8+.

Apsolutna usklađenost

Vrlo zanimljivo rješenje. Ideja je da trebate postaviti visinu vanjskog spremnika:

Apsolutno poravnato (položaj: relativno; min. visina: 500 px; pozadina: hsl(200, 100%, 97%); ) .apsolutno poravnato img ( širina: 50%; min. širina: 200 px; visina: automatski; preljev : auto; margina: auto; pozicija: gore: 0;

Centrirajte pomoću prijevoda

Novo rješenje gdje se koristi CSS transformacije. Omogućuje vodoravno i okomito poravnanje:

Središte (pozadina: hsl(180, 100%, 97%); pozicija: relativna; minimalna visina: 500px; ) .centar img (položaj: apsolutna; vrh: 50%; lijevo: 50%; transformacija: prevedi(-50) %, -50%); širina: 30%; visina: automatski)

Postoji nekoliko nedostataka:

• Svojstvo CSS transformacije zahtijeva prefikse preglednika
• Ne radi u starijim verzijama IE (8 i niže)
• Vanjskoj posudi treba dati visinu.
• Ako unutar spremnika ima teksta, može biti malo mutan.

Centriranje korištenjem fleksibilnog tipa zaslona

Vjerojatno najjednostavnija opcija.

Središte (pozadina: hsl(240, 100%, 97%); prikaz: savijanje; opravdanje-sadržaj: središte; poravnanje stavki: središte; ) .centar img (širina: 30%; visina: automatski; )

Ne radi u svim verzijama IE-a (iako se možete zaštititi dodatnom upotrebom display: table-cell). Puni CSS:

Središte (pozadina: hsl(240, 100%, 97%); zaslon: -webkit-box; /* Safari, iOS 6 i ranije verzije; Android, stari WebKit */ display: -moz-box; /* Firefox (možda ima pogreške) */ display: -ms-flexbox; /* IE 10 */ prikaz: -webkit-flex; /* Chrome 21+ */ display: flex; /* Opera 12.1+, Firefox 22+ */ -webkit-box-align: center; -moz-box-align: središte; -ms-flex-align: središte; -webkit-align-items: središte; align-items: center; -webkit-box-pack: centar; -moz-box-pack: centar; -ms-flex-pack: centar; -webkit-justify-content: centar; justify-content: centar; )

Centriranje pomoću kalc

U nekim slučajevima, ovu metodu svestraniji od korištenja flexboxa:

Središte (pozadina: hsl(300, 100%, 97%); min-visina: 600px; pozicija: relativna; ) .center img ( širina: 40%; visina: automatski; pozicija: apsolutna; vrh:calc(50% - 20%) lijevo: calc(50% - 20%);

Vrlo je jednostavno, možemo izračunati potrebne dimenzije ovisno o cijelom izgledu stranice. Računica je vrlo jednostavna, 50% je središnja točka kontejner, ali naš zadatak je postaviti lijevo gornji kut slike. Zatim oduzmite pola visine i širine slike. Formula je sljedeća:

Gore: calc(50% - (40% / 2)); lijevo: calc(50% - (40% / 2));

U praksi to možete pronaći ovu metodu radi dobro ako znamo veličine elemenata:

Središnja slika (širina: 500px; visina: 500px; pozicija: apsolutna; vrh:calc(50% - (300px / 2)); lijevo: calc(50% - (300px - 2)); )

Ovu metodu podržava Firefox, počevši od verzije 4, morat ćete registrirati prefikse preglednika. Ne radi u IE 8. Puni kod:

Središnja slika ( širina: 40%; visina: automatski; pozicija: apsolutna; gore: -webkit-calc(50% - 20%); lijevo: -webkit-calc(50% - 20%); gore: -moz-calc (50% - 20%); lijevo: -moz-calc(50% - 20%); gore: calc(50% - 20%);

Nadam se da su vam ove metode dovoljne da pronađete najbolje rješenje za sebe.