Në dizajnin modern të uebit, prona noton përdoret pothuajse në çdo hap. Por pavarësisht kësaj përhapjeje, jo të gjithë e kuptojnë mekanizmin e blloqeve lundruese, sjelljen e tyre dhe çfarë pasojash mund të ketë përdorimi i tyre.
Çfarë është "float"?
noton Kjo është një pronë e pozicionimit CSS. Për të kuptuar thelbin dhe origjinën e tij, duhet t'i kushtoni vëmendje modelit të printuar. Në paraqitjet e printuara, imazhi mund të pozicionohet në mënyrë që teksti të rrjedhë rreth tij. Kjo zakonisht quhet " mbështjellja e tekstit".
Në paraqitjen e faqes, një bllok që përmban tekst mund të specifikohet për t'u përdorur mbështjellja e tekstit rreth një imazhi ose injoroni mbështjelljen. Injorimi i mbështjelljes së tekstit do të lejojë që fjalët të rrjedhin mbi imazhin sikur të mos ishte aty. Kjo bën dallimin nëse imazhi është pjesë e rrjedhës në faqe apo jo. Në dizajnin e uebit gjithçka është shumë e ngjashme.
Në dizajnin e uebit, një element me një veti CSS aplikohet në të noton do të sillet si një imazh me tekst të mbështjellë rreth tij në një plan urbanistik të printuar. Elementet lundrues mbeten pjesë e rrjedhës së faqes së internetit. Kjo është krejt e ndryshme nga elementët e pozicionuar absolut, të cilët hiqen nga rrjedha, sikur në një paraqitje të printuar, bllokut të tekstit t'i ishte thënë të injoronte mbështjelljen e imazhit. Elementet e pozicionuar absolutisht nuk ndikojnë në vendosjen e elementeve të tjerë, dhe elementët e tjerë nuk ndikojnë në vendosjen e tyre.
Vendosja e një prone noton për elementët që përdorin CSS duket kështu:
#bari anësor (float: djathtas; )
Ekzistojnë katër vlera të vlefshme për pronën noton - majtas, drejtë, asnje, trashëgojnë. Dy të parat majtas Dhe drejtë tregoni drejtimin e vendndodhjes - majtas dhe djathtas, përkatësisht. Asnje- vlera e paracaktuar, tregon që elementi nuk është lundrues dhe trashëgojnë duke udhëzuar një element për të trashëguar vlerën e një prone noton nga elementi mëmë.
Për çfarë përdoret float?
Përtej shembullit të thjeshtë të mbështjelljes së tekstit rreth një imazhi, noton mund të përdoret për të krijuar paraqitje në internet.
noton, është gjithashtu i përshtatshëm për t'u përdorur për elementë të vegjël të paraqitjes. Për shembull, le të marrim këtë fragment të vogël të një faqe interneti. Nëse vendosim pronën noton Për një imazh të vogël avatar, kur ndryshon madhësia e imazhit, mbështjellja do të ndryshojë sipas dimensioneve të reja të imazhit:
E njëjta paraqitje mund të zbatohet duke përdorur pozicionimin relativ të kontejnerit dhe pozicionimin absolut të avatarit dhe tekstit brenda tij. Por në një plan urbanistik të zbatuar sipas kësaj skeme, ndryshimi i madhësisë së imazhit nuk do të ndikojë në bllokun e tekstit, pasi elementët me pozicionim absolut nuk prekin elementët e tjerë dhe elementët e tjerë nuk ndikojnë në to.
Rivendosja e mbështjelljes
Qartë pronë e lidhur me pronën noton. Element me grup pronash qartë nuk do të lëvizë lart rreth një elementi me grupin e vetive noton, por do të lëvizë poshtë duke injoruar rrjedhën. Dhe përsëri, një ilustrim që do të shpjegojë gjithçka pa vonesë.
Në shembullin e mësipërm, shiriti anësor lundronte në të djathtë të bllokut kryesor të përmbajtjes. "Foteri" është zhvendosur në hapësirën e lirë nën shiritin anësor, duke rrjedhur rreth bllokut me përmbajtjen kryesore. Për të zgjidhur këtë problem, duhet të specifikoni një vlerë për pronën e futerit clear:both për të "pastruar" rrjedhën rreth të dy kolonave.
#footer (e qartë: të dyja; ) 
Prona qartë ka katër kuptime. te dyja përdoret për të lehtësuar rrjedhën në të dy drejtimet. Majtas Dhe E drejta përdoren për të rivendosur një drejtim - majtas ose djathtas, përkatësisht. Asnje- vlera e paracaktuar. trashëgojnë mund të jetë vlera e pestë, por çuditërisht nuk mbështetet Internet Explorer. Rivendosja e vetëm rrjedhës majtas ose djathtas është mjaft e rrallë, por ka përfitime praktike.
Kolapsi i madh
Një gjë për të punuar me noton Ajo që është e çuditshme është efekti që kjo veti ka tek elementët prindër. Nëse elementi mëmë nuk përmban elementë të tjerë përveç një notues, atëherë lartësia e tij fjalë për fjalë shembet. Kjo nuk është gjithmonë e dukshme, veçanërisht nëse elementi prind nuk ka një sfond të spikatur, por është e rëndësishme të kihet parasysh.
Por alternativa e një kolapsi të tillë është edhe më e keqe. Merrni parasysh skenarin e mëposhtëm:
Nëse blloku i sipërm zgjerohet automatikisht për të akomoduar elementin lundrues, do të përfundojmë me një hendek në rrjedhën e tekstit midis paragrafëve, pa asnjë mënyrë për ta rregulluar atë. Nëse do të ishte kështu, atëherë zhvilluesit do të ankoheshin shumë më shpesh për këtë sjellje të blloqeve lundruese sesa tani për kolapsin.
Kolapsi duhet mbajtur gjithmonë parasysh për të parandaluar sjelljen e çuditshme të paraqitjes dhe problemet e ndër-shfletuesve. Ne mund ta zgjidhim këtë problem duke përdorur qartë pas elementit lundrues në enë, por përpara se kontejneri të mbyllet.
Teknikat e anulimit të mbështjelljes
Nëse jeni në një situatë ku e dini se ku do të jetë elementi tjetër, mund të përdorni clear:të dyja dhe të shkoni në biznesin tuaj. Kjo është ideale pasi nuk kërkon asnjë hack ose element shtesë. Por për fat të keq, zakonisht jo gjithçka shkon ashtu siç duam dhe në këtë rast mund të përdorni mjetet e mëposhtme.
Metoda e bllokut bosh.
Është fjalë për fjalë një bllok bosh.
. Ndonjëherë mund të gjesh një element
ose ndonjë element tjetër të rastësishëm, por div është më i zakonshmi pasi nuk ka stil të paracaktuar në shfletues, nuk ka funksion të veçantë dhe nuk ka gjasa të jetë në stilin e përgjithshëm CSS. Kjo metodë refuzohet nga puristët semantikë, sepse prania e saj nuk ka kuptim kontekstual në faqe dhe është vetëm për paraqitje. Sigurisht, në një kuptim të ngushtë kanë të drejtë, por ai bën punën e tij dhe nuk i bën keq askujt.
Metoda e tejmbushjes.
Bazuar në specifikimin e vetive CSS vërshoj për elementin prind. Nëse kjo veti është caktuar në auto ose i fshehur për elementin mëmë, ai do të zgjerohet pas elementit lundrues, duke rivendosur në mënyrë efektive mbështjelljen e elementeve të mëpasshëm. Kjo metodë mund të jetë e bukur semantikisht, pasi nuk kërkon elementë shtesë. Megjithatë, siç mund ta shihni ne kemi shtuar një të re div për të përdorur këtë metodë, e cila është e barabartë me përdorimin e një blloku bosh josemantik dhe është më pak fleksibël. Duhet mbajtur mend gjithashtu se prona vërshoj nuk ka për qëllim të çaktivizojë mbështjelljen. Kini kujdes që të mos fshehni aksidentalisht përmbajtjen ose të mos shkaktoni shirita të padëshiruar të lëvizjes.
Metoda e thjeshtë e pastrimit.
Përdor një pseudo-zgjedhës CSS (:pas) për të hequr mbështjelljen. Në vend të përdorimit të pronës vërshoj Për elementin prind, vendosni një klasë shtesë për të, për shembull "clearfix" dhe përdorni stilin e mëposhtëm CSS:
Clearfix:after (përmbajtja: "."; dukshmëria: e fshehur; shfaqja: bllok; lartësia: 0; e qartë: të dyja; )
Kjo përdor një pjesë të vogël përmbajtjeje të fshehur nga pamja, e vendosur pas elementit prind, i cili rivendos mbështjelljen. Kjo metodë nuk është e plotë, pasi duhet përmirësuar për të mbështetur shfletuesit më të vjetër.
Situata të ndryshme kërkojnë metoda të ndryshme të lehtësimit të bllofit. Le të marrim si shembull një rrjet të llojeve të ndryshme të blloqeve.
Për të kombinuar më mirë vizualisht blloqe të ngjashme, duhet të fillojmë një linjë të re kur ngjyra ndryshon. Mund të përdorim metodën e tejmbushjes ose të pastrimit të dritës nëse çdo grup ngjyrash ka një element prind. Ose përdorim metodën e bllokut bosh ndërmjet grupeve. Tre blloqe mëmë që nuk ekzistonin më parë ose tre blloqe boshe që nuk ekzistonin më parë. Varet nga ju që të vendosni se cila metodë është më e mirë.
Probleme me elementët lundrues
Elementet lundruese shpesh kritikohen për shkak të brishtësisë së tyre. Pjesa më e madhe e kësaj brishtësie vjen nga IE6 dhe ai gabime të orientuara drejt notit. Por ndërsa gjithnjë e më shumë zhvillues heqin mbështetjen për IE6, mund të mos mendoni për të, por për ata që kujdesen për pajtueshmërinë, këtu është një listë e shkurtër.
Pushdown, është një simptomë që elementi brenda bllokut lundrues është më i gjerë se ai bllok (kjo ndodh zakonisht me imazhet). Shumica e shfletuesve do ta bëjnë elementin e lundruar të dalë jashtë, por kjo nuk do të ketë asnjë efekt në paraqitjen. IE do të zgjerojë bllokun lundrues dhe shpesh kjo ka një efekt drastik në paraqitjen. Një shembull tipik është një imazh që del jashtë bllokut kryesor të përmbajtjes, duke e shtyrë shiritin anësor poshtë.
Zgjidhja e shpejtë e problemit: përdor tejmbushjen: i fshehur; për të hequr të tepërt.
Gabim me marzh të dyfishtë- një tjetër gjë për t'u mbajtur mend kur punoni me IE6. Ky bug shprehet në faktin se nëse fusha është në të njëjtën anë si ajo është e orientuar noton, fusha është dyfishuar. Për shembull:
Do të futim fushën e majtë 40 px., në vend të 20 px.
Zgjidhja e shpejtë e problemit: Vendosni ekranin: inline për bllokun lundrues dhe mos u shqetësoni se elementi do të mbetet në nivel blloku.
3px Jog. Thelbi i këtij gabimi është se teksti i vendosur pranë elementit lundrues zhvendoset çuditërisht me tre piksel, sikur nën ndikimin e një fushe force të vendosur rreth elementit lundrues. Zgjidhja e shpejtë e problemit: Vendosni gjerësinë dhe lartësinë e tekstit të prekur.
Shfaqet në IE7 Gabim në kufirin e poshtëm, kur elementi prind është një element lundrues dhe fëmija i tij që ndodhet brenda tij është gjithashtu një element lundrues. Marzhi i poshtëm (margjina-fund) i fëmijës injorohet nga elementi paraardhës. Zgjidhja e shpejtë e problemit: Përdorni padding-bottom në elementin prind në vend të margin-bottom në elementin fëmijë.
Përdorimi i saktë i vetive CSS float mund të jetë një detyrë sfiduese edhe për një projektues me përvojë të paraqitjes. Ky artikull përmban shembuj të përdorimit të float, si dhe disa gabime, me shembuj ilustrues.
Çfarë është float?
Disa elementë në CSS janë në nivel blloku dhe për këtë arsye fillojnë në një linjë të re. Për shembull, nëse vendosni dy paragrafë me etiketa P, ato do të jenë njëra nën tjetrën. Elementet e tjera janë "të vogla", d.m.th. shfaqen në faqe në një rresht.Një mënyrë për të ricaktuar një tip float tek elementët është përdorimi i vetive float. Një shembull klasik është përdorimi i float për të lidhur një imazh majtas ose djathtas. Këtu është kodi i thjeshtë HTML për imazhin dhe paragrafin:
Lorem ipsum...
Ato shfaqen në një linjë të re:
Shtoni disa CSS në imazh:
img (float: djathtas; margjina: 20 px; )
Kjo rezulton në shtrirjen e duhur:
Nëse ka më shumë tekst, paragrafi do të përfundojë rreth figurës:
Le të themi se duhet të vendosim 20 pikselë midis imazhit dhe tekstit. Ky ndërtim nuk do të funksionojë: p (diferencë: 20 px;)
Në mënyrë korrekte si kjo:
img (diferencë: 20 px;)
Pse nuk funksionon dhëmbëzimi i paragrafit? Për ta kuptuar, le të shtojmë një kornizë:
P (kufi: solid 1px e zezë;)
Rezultati mund t'ju befasojë:
Rezulton se fotografia është brenda paragrafit! Kjo është arsyeja pse prona e marzhit nuk funksionon në rastin e parë. Për ta rregulluar këtë, mund të aplikoni float:left në paragrafin dhe të specifikoni një gjerësi absolute:
Rregulla të çuditshme notimi
Le të kalojmë në përdorime më komplekse të float: rregullat që rregullojnë objektet lundruese. Kjo mund të jetë e nevojshme kur shtroni një galeri imazhesh. Për shembull:
Si parazgjedhje, çdo artikull i listës do të shfaqet në një rresht të ri. Nëse aplikoni float:left për secilin, imazhet do të rreshtohen me një ndërprerje rreshti:
Li (lundrues: majtas; diferencë: 4 px; )
Por, çka nëse imazhet janë me lartësi të ndryshme?
Nëse shtojmë një ekran me një rresht në artikujt e listës, do të duket pak më i bukur:
Li (ekrani: inline; )
Tani le të rreshtojmë vertikalisht:
Img (drejtimi vertikal: lart; )
Duhet mbajtur mend se në rastin e një lartësie më të madhe të fotografive, imazhet e mbetura mbështjellin vetëm një të mëparshme, për shembull:
Një shembull i ndryshimit të renditjes së elementeve - për shembull, ne kemi një listë të elementeve sipas renditjes:
Nëse duam t'i vendosim ato në rend të kundërt, thjesht përdorim float:right në vend të float:left, dhe nuk kemi pse të ndryshojmë rendin në HTML:
Përdorimi i float është i përshtatshëm për grupimin e elementeve në një faqe, por problemi i madh është se elementët pasardhës (tekst ose bllok) marrin gjithashtu vetinë float. Për shembull, ne kemi një bllok imazhesh:
Teksti poshtë tij fillon të mbështillet rreth të gjithë bllokut:
Për të shmangur këtë, duhet të përdorni pronën e qartë. Nëse e zbatojmë atë në imazhin e dytë:
Ul li: nth-child(2) (e qartë: majtas; )
Ne marrim këtë:
Në këtë rast, imazhet e mbetura vazhdojnë të trashëgojnë float:left. Prandaj, teksti do të shfaqet në mënyrë të ngathët:
Ju duhet të aplikoni qartë: të dyja në paragrafin:
P (e qartë: të dyja;)
Problemi ynë është zgjidhur:
Tani le të themi se duhet të vendosim sfondin për galerinë nga shembujt e mëparshëm. Nëse elementët nuk do të lundronin, do të dukej kështu:
Ul (sfondi: gri;)
Por nëse aplikoni float:left tek elementët e listës, sfondi zhduket plotësisht:
Nëse së pari vendosim lartësinë në UL:
Ul (lartësia: 300 px; )
Edhe kjo nuk e zgjidh problemin, sepse... Dimensionet e sfondit janë vendosur absolutisht. Klasa clearfix do të na ndihmojë, e cila do të aplikohet në div në të njëjtin nivel me elementët UL.
Clearfix (e qartë: të dyja;)
Ekziston një zgjidhje tjetër duke përdorur tejmbushjen:
Ul (mbushje: automatik;)
Nëntë rregulla për elementët notues:
- Elementet lundrues nuk mund të shtrihen përtej skajit të kontejnerit të tyre mëmë.
- Çdo element lundrues do të shfaqet djathtas ose poshtë të mëparshmit me float:majtas, ose majtas dhe poshtë të mëparshmit me float:djathtas.
- Një bllok me float:left nuk mund të jetë më në të djathtë se një bllok me float:djathtas.
- Një element lundrues nuk mund të shtrihet përtej kufirit të sipërm të kontejnerit të tij.
- Një element lundrues nuk mund të pozicionohet më lart se blloku i tij prind ose elementi i mëparshëm lundrues.
- Një element lundrues nuk mund të pozicionohet më lart se linja e mëparshme e elementeve të linjës
- Blloku lundrues duhet të pozicionohet sa më lart që të jetë e mundur.
- Një element lundrues pas tjetrit nuk mund të shkojë përtej kontejnerit të tij - ai përfundon në rreshtin tjetër.
- Një bllok me float: majtas duhet të pozicionohet sa më shumë në të majtë të jetë e mundur, dhe një bllok me float: djathtas duhet të pozicionohet sa më shumë në të djathtë.
Pasi u pyeta për herë të gjashtëdhjetë e tetë se pse një bllok me float shfaqet gabimisht, vendosa të shkruaj këtë shënim, i cili do të shpjegonte situatat tipike me të cilat përballet një projektues rishtar i paraqitjes, dhe gjithashtu për të dhënë thjesht një lidhje me këtë. artikull herën tjetër.
Mohim përgjegjësie
Unë nuk jam një stilist profesionist, megjithëse për shkak të natyrës së aktivitetit tim më është dashur të krijoj më shumë se një duzinë faqe interneti. Kam miq që po mësojnë layout dhe dua t'i ndihmoj. Me shumë mundësi i keni edhe ju. Qëllimi i këtij artikulli nuk është të tregojë diçka të re, por të flasim për të vjetrën nga pikëpamja e problemeve më të zakonshme me të cilat përballen dizajnerët fillestarë të paraqitjes. Unë nuk pretendoj të vërtetën absolute të fjalëve të mia dhe do të gëzohem vetëm nëse më korrigjoni dhe plotësoni.Vetitë e një elementi me float që duhet të keni gjithmonë parasysh
nëse është vendosur majtas ose djathtas- Artikulli shfaqet si bllok, sikur të kishte paraqitjen e pronës: bllok;
- Elementi gjerësia është e ngjeshur në madhësinë e përmbajtjes, përveç nëse gjerësia është caktuar në mënyrë eksplicite për elementin;
- Elementi shkopinj në skajin e majtë (majtas) ose të djathtë (djathtas);
- Të gjitha të tjerat përmbajtja e faqes në kodin HTML pas element me noton, e mbështjell atë;
Incidenti jetësor numër 1
Unë kam dy blloqe, aplikova float: djathtas në njërin prej blloqeve, ai u rreshtua në të djathtë, por mbeti ende poshtë të parës. Një shembull se si duket.
Shkak
Nëse kjo ndodh, do të thotë që keni aplikuar float jo në bllokun e parë, por në bllokun e dytë. Për shkak të faktit se një element lundrues (një me float) rrjedh vetëm nga ata elementë që shfaqen në kodin HTML pas atë, blloku i parë nuk do të rrjedhë rreth tij.Gjithashtu, elementët e bllokut si parazgjedhje kanë gjerësinë (provën) maksimale të mundshme brenda prindit. Elementi juaj i lundruar thjesht nuk përshtatet në përputhje me elementët e parë të bllokut me gjerësi maksimale, kështu që ai shtyhet poshtë.
Gjithashtu Të gjitha përmbajtjen e faqes që vjen në kodin HTML pas rreth tyre rrjedhin elementë lundrues, gjë që shpesh çon në një efekt të papritur.
Zgjidhje
Zgjidhja numër 1. Vendosni në mënyrë të qartë lartësinë e enës. Në rastet kur dihet se cilat duhet të jenë përmasat e enës, kjo është zgjidhja më e thjeshtë.Zgjidhja numër 2. Shto një bllok bosh me të qartë: të dyja . Shtimi i një elementi të tillë heq "lundrueshmërinë" e blloqeve dhe e bën kontejnerin të shtrihet në lartësinë e tij të plotë. Semantikisht, kjo nuk është zgjidhja më e mirë, pasi prezanton një element shtesë të shënjimit.
Zgjidhja numër 3. Zbato veçorinë e tejmbushjes: auto (ose e fshehur) në kontejner. Shkakton që kontejneri të rillogarisë lartësinë dhe ta ndryshojë atë për të përfshirë elementë lundrues, përndryshe do të duhet të shtojë një shirit lëvizës ose t'i fshehë ato. Megjithatë, kjo ndodh ndonjëherë, ndaj kini kujdes.
UPD
Lexo edhe nga si vazhdim i diskutimit të pronës float.
Nja dy vjet më parë, kur zhvilluesit filluan të lëviznin për herë të parë në shënjimin HTML pa tabela, prona CSS float papritmas mori një rol shumë të rëndësishëm. Arsyeja pse vetia float u bë kaq e zakonshme ishte sepse, si parazgjedhje, elementët e bllokut nuk rreshtoheshin pranë njëri-tjetrit në një format të bazuar në kolonë. Meqenëse kolonat kërkohen pothuajse në çdo skemë CSS, kjo pronë është mësuar - dhe madje është abuzuar.
Prona noton në CSS, i lejon zhvilluesit të përfshijë kolona të ngjashme me tabelën në shënjimin HTML pa përdorur tabela. Nëse jo për pronën noton, atëherë paraqitjet CSS nuk do të ishin të mundshme përveç përdorimit të pozicionimit absolut dhe relativ - i cili do të ishte i ngathët dhe do ta bënte paraqitjen e paraqitjes të pambajtur.
Në këtë artikull do t'ju tregojmë çfarë është një pronë noton dhe si ndikon në elementë në kontekste specifike. Ne gjithashtu do të hedhim një vështrim në disa nga ndryshimet që mund të lindin me këtë pronë në shfletuesit më të përdorur. Së fundi, ne do të demonstrojmë disa aplikime praktike të pronës noton. Kjo duhet të sigurojë gjithashtu një diskutim gjithëpërfshirës dhe të plotë të kësaj prone dhe ndikimit të saj në zhvillimin e CSS.
Përkufizimi dhe sintaksa e pronës CSS Float
Qëllimi i vetive float është të shtyjë një element blloku majtas ose djathtas, duke e nxjerrë atë nga rrjedha e dokumentit. Kjo lejon që përmbajtja aktuale të shembet natyrshëm rreth elementit lundrues. Ky koncept është i ngjashëm me atë që shihni çdo ditë në literaturën e shtypur, ku fotografitë dhe elementët e tjerë grafikë janë rreshtuar në njërën anë dhe përmbajtja (zakonisht teksti) rrjedh natyrshëm rreth elementit të rreshtuar rreth skajit të majtë ose të djathtë.
Imazhi i mësipërm tregon seksionin "Lexuesit" të faqes së revistës .net me 3 foto lexuesish që janë lënë të rreshtuara në kolonat e tyre me tekstin e mbështjellë rreth imazheve. Kjo është ideja bazë që qëndron pas vetive float në paraqitjet CSS, dhe ajo demonstron një nga teknikat e përdorura në hartimin e tabelave.
Efektiviteti i përdorimit të notave në paraqitjet me shumë kolona u shpjegua nga Douglas Bowman në 2004 në prezantimin e tij klasik No More Tables:
Bowman shpjegoi parimet pas paraqitjes pa tavolinë, duke përdorur një sajt të vjetër të Microsoft si referencë. Floats u përdorën dukshëm në rishikimin e tij të rremë të markup-it të Microsoft.
Sintaksë
Vetia Float mund të marrë një nga 4 vlerat: majtas, djathtas, asnjë, dhe trashëgim. Kjo është deklaruar siç tregohet në kodin më poshtë:
#shirit anësor (lundrues: majtas; )
#bar anësor ( noton: majtas; |
Vlerat më të përdorura janë majtas dhe djathtas. Vlera asnjë ose vlera fillestare float për çdo element të faqes HTML është vlera e paracaktuar. Vlera e trashëguar, e cila mund të aplikohet pothuajse në çdo pronë CSS, nuk funksionon në versionet e Internet Explorer, duke përfshirë 7.
Vetia float nuk kërkon që ndonjë veçori tjetër të zbatohet në elementin float, megjithatë, për të funksionuar siç duhet, float do të funksionojë në mënyrë më efikase në rrethana të caktuara.
Në mënyrë tipike, një element lundrues duhet të ketë gjerësia e vendosur në mënyrë eksplicite(nëse nuk është një element i zëvendësuar, si një imazh). Kjo siguron që float të sillet siç pritej dhe ndihmon në shmangien e problemeve në disa shfletues.
#shirit anësor ( notues: majtas; gjerësia: 350 px; )
#bar anësor ( noton: majtas; gjerësia: 350 px; |
Karakteristikat e elementeve lundrues
Më poshtë është një listë e sjelljes së elementeve lundrues, sipas specifikimit CSS2:
Një bllok i lundruar majtas do të notohet në të majtë derisa skaji i tij i majtë (ose kufiri i skajit nëse nuk ka skaj) të prekë ose skajin e përmbajtjes së bllokut ose skajin e një blloku tjetër të notuar
Nëse madhësia e një blloku të notuar tejkalon hapësirën horizontale të disponueshme, atëherë blloku i lundrueshëm do të zhvendoset poshtë
Elementet e bllokut jo të pozicionuar dhe jo të lundruar veprojnë si elementë lundrues, d.m.th. është jashtë rrjedhës së dokumentit
Skajet e një blloku të lundruar nuk do të përputhen me skajet e blloqeve ngjitur
Elementi rrënjë ( ) nuk mund të lundrohet
Një element inline, ai që lundrohet, konvertohet në një element blloku
Flot në praktikë
Rasti më i zakonshëm i përdorimit për veçorinë float është të notosh një imazh me tekst që e mbështjell atë. Për shembull:
Enean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
CSS e aplikuar në imazhin në kutinë e mësipërme duket kështu:
img ( float: majtas; margjina: 0 15px 5px 0; kufiri: solid 1px #bbb; )
img( noton: majtas; margjina: 0 15px 5px 0; kufiri: solid 1px #bbb; |
E vetmja veti që mund ta arrijë këtë efekt është vetia float. Vetitë e tjera (diferenca dhe kufiri) janë aty për arsye estetike. Elementë të tjerë në bllok (etiketat
Me tekst në to) nuk kanë nevojë për ndonjë stil.
Siç u përmend më herët, elementët floated shtyhen jashtë rrjedhës së dokumentit, dhe elementët e tjerë të bllokut mbeten në rrjedhë, duke vepruar sikur elementi i lundruar të mos ishte as aty. Kjo është demonstruar vizualisht më poshtë:
Kjo kuti qarkullon majtas
Kjo
Elementi ka një ngjyrë të ndryshme sfondi për të treguar se shtrihet në gjerësinë e prindit të tij, duke injoruar elementin e lundruar. Ky tekst inline, megjithatë, mbështillet rreth kutisë së lëvizur.
Në shembullin e mësipërm
element në nivel blloku, kështu që ai injoron elementin e lundruar që përfshin gjerësinë e kontejnerit (minus mbushje). Të gjithë elementët e tipit bllok jo-lundrues do të sillen në mënyrë të ngjashme.
Teksti në një paragraf është në linjë, kështu që mbështjell elementin e lundruar. Bllokut të lundruar i jepen gjithashtu opsione margjinash për ta zhvendosur atë nga paragrafi, duke e bërë atë vizualisht të pastër në mënyrë që elementi i paragrafit të injorojë bllokun e lundruar.
Pastrimi i notave
Çështjet e paraqitjes me notat zakonisht zgjidhen duke përdorur veçorinë e qartë CSS, e cila ju lejon të "pastroni" elementët e notuar nga e majta ose e djathta, ose të dyja.
Le të shohim një shembull që shihet shpesh - një footer që mbështillet rreth anës së djathtë të një paraqitjeje me 2 klon:
Kolona e majtë kaloi majtas
Nëse shikoni faqen IE6 dhe IE7, nuk do të shihni asnjë problem. Kolonat e majta dhe të djathta janë në vend, dhe fundi është në fund. Por në Firefox, Opera, Safari dhe Chrome, do të shihni se fundi lëviz nga vendi. Kjo është shkaktuar nga aplikimi i float në kolona. Kjo është sjellje korrekte, megjithëse është më problematike. Për të zgjidhur këtë problem, ne përdorim veçorinë e qartë të mësipërme, në lidhje me fundin:
#footer (e qartë: të dyja; )
#footer ( qartë: të dyja; |
Rezultati tregohet më poshtë:
Kolona e majtë kaloi majtas
Kolona e djathtë gjithashtu lundronte majtas
Vetia e pastër do të pastrojë vetëm elementët e lundruar, kështu që aplikimi i qartë: të dyja në të dyja kolonat nuk do të bënte që futeri të bjerë poshtë, sepse futeri nuk është një element i lëvizur.
Vetia e qartë do të pastrojë vetëm elementët e lundruar. Përdorimi i qartë është ky: të dy kolonat nuk do të heqin fundin sepse nuk është një element i lundruar.
Pra, përdorni "clear" në elementët që nuk lëvizin, dhe madje ndonjëherë në elementët e notuar, për të detyruar elementët e faqes të zënë pozicionet e tyre të përcaktuara.
Rregullimi i braktisjes së prindërve
Një nga tiparet më të zakonshme të shënjimit float është "lease-parent". Kjo tregohet në shembullin e mëposhtëm:
Banor pellentesk morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Vini re se baza e imazhit të lundruar shfaqet jashtë prindit të tij. Prindi nuk është zgjeruar plotësisht për të përmbajtur një imazh të lundruar. Kjo është shkaktuar nga ajo që diskutuam më herët: elementi i lundruar është jashtë rrjedhës natyrore të dokumentit, megjithëse shfaqen të gjithë elementët e bllokut, por elementi i lundruar nuk është aty. Ky nuk është një gabim CSS, gjithçka është sipas specifikimeve të CSS. Të gjithë shfletuesit bëjnë të njëjtën gjë në këtë shembull. Duhet thënë se, në këtë shembull, shtimi i gjerësisë së kontejnerit mund të parandalojë problemin në IE, por gjithashtu duhet të zgjidhë problemin për Firefox, Opera, Safari ose Chrome.
Zgjidhja 1: Noton për enë
Mënyra më e thjeshtë për të zgjidhur këtë problem është të notoni elementin prind:
Banor pellentesk morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Kontejneri tani zgjerohet për të akomoduar të gjithë elementët fëmijë. Por për fat të keq, ky rregullim do të funksionojë vetëm në një numër të kufizuar rastesh, pasi prindi lundrues mund të ketë pasoja të padëshirueshme për paraqitjen tuaj.
Zgjidhja 2: Shto Markup shtesë
Kjo është një metodë e vjetëruar, por është një opsion i thjeshtë. Thjesht shtoni një element shtesë në fund të enës dhe "pastroni" atë. Kështu do të duket kodi HTML pas zbatimit të kësaj metode:
XHTML
Banor pellentesk morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Banor pellentesk morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. |
Dhe si rezultat, CSS aplikohet në elementët e rinj:
Clearfix (e qartë: të dyja;)
Pastro ( qartë: të dyja; |
Këtë mund ta bëni edhe nëpërmjet
etiketë me stilin aktual. Sido që të jetë, do të merrni rezultatin e dëshiruar: kontejneri i prindërve do të zgjerohet për të përfshirë të gjithë fëmijët e tij. Por kjo metodë nuk rekomandohet sepse shton kodin josemantik në shënimin tuaj.
Zgjidhja 3: Pseudoelementi pas
Pseudoelementi :after shton një element në faqen e dhënë HTML. Kjo metodë është përdorur mjaft gjerësisht për të zgjidhur problemet e pastrimit të notave. Kështu duket CSS:
Clearfix:after (përmbajtja: "."; shfaqja: bllok; lartësia: 0; qartë: të dyja; dukshmëria: e fshehur; )
Pastro: pas ( përmbajtja: "." ; shfaqja: bllok; lartësia: 0; qartë: të dyja; dukshmëria: e fshehur; |
Klasa CSS "clearfix" zbatohet për çdo kontejner që ka fëmijë lundrues dhe nuk zgjerohet për t'i përfshirë ata.
Por kjo metodë nuk funksionon për Internet Explorer deri në versionin 7, kështu që për IE duhet të përdorni një nga opsionet e mëposhtme:
Clearfix (ekrani: inline-block; ) .clearfix (zoom: 1;)
Pastro ( ekrani: inline-block; Pastro ( zmadhimi: 1; |
Në varësi të llojit të problemit, keni të bëni me një nga dy zgjidhjet që do ta zgjidhin këtë problem në Internet Explorer. Duhet të kihet parasysh se vetia e zmadhimit nuk është një pronë standarde e Microsoft-it dhe për këtë arsye CSS-ja juaj do të bëhet e pavlefshme.
Meqenëse pseudoelementi :after nuk funksionon në IE6/7, kodi është pak i fryrë dhe i ndërlikuar, dhe kërkohet një stil shtesë që nuk është i vlefshëm vetëm për IE, kështu që kjo zgjidhje nuk është mënyra më e mirë, por është ndoshta më e mira që kemi parë.
Zgjidhja 4: Vetia e tejmbushjes
Deri tani, mënyra më e mirë dhe më e lehtë për të zgjidhur problemin e braktisjes së prindit është shtimi i tejkalimit: i fshehur ose i tejmbushur: automatik në elementin prind. Është i qartë, i lehtë për t'u mirëmbajtur, funksionon pothuajse në të gjithë shfletuesit dhe nuk shton asnjë shënim të panevojshëm.
Vini re se thashë "pothuajse" në të gjithë shfletuesit. Kjo për shkak se nuk funksionon në IE6. Por, në shumë raste, kontejneri prind do të ketë një gjerësi të caktuar, e cila rregullon problemin në IE6. Nëse kontejneri prind nuk ka gjerësi, mund të shtoni një stil të vetëm IE6 me kodin e mëposhtëm:
// Ky rregullim është vetëm për IE6 .clearfix (lartësia: 1%; tejmbushja: e dukshme; )
// Ky rregullim është vetëm për IE6 Pastro ( lartësia: 1%; vërshimi: i dukshëm; |
Në IE6, vetia e lartësisë trajtohet gabimisht si min-lartësia, kështu që kjo e detyron kontejnerin të përfshijë fëmijët e tij. Vetia Overflow më pas vendoset përsëri në "të dukshme" për të siguruar që përmbajtja të mos fshihet ose të lëvizet.
E vetmja pengesë e përdorimit të metodës së tejmbushjes (në çdo shfletues) është mundësia që përmbajtja e elementit të ketë shirita lëvizjeje ose të fshehë përmbajtjen. Nëse ka ndonjë element me marzhe negative ose pozicionim absolut në prind, ato do të fshihen nëse shtrihen përtej prindit, kështu që kjo metodë duhet përdorur me kujdes. Duhet gjithashtu të theksohet se nëse elementi i përmbajtur do të kishte një lartësi ose min-lartësi të caktuar, atëherë definitivisht nuk do të mund të përdorni metodën e tejmbushjes.
Pra, nuk është me të vërtetë e lehtë për të zgjidhur këtë problem ndër-shfletues. Por pothuajse çdo problem i pastrimit të notit mund të zgjidhet me një nga metodat e mësipërme.
Gabimet e lidhura me float në Internet Explorer
Me kalimin e viteve, ka pasur shumë artikuj të botuar në internet që diskutojnë gabimet e zakonshme që lidhen me notat në shënimin CSS. Të gjithë ata, jo çuditërisht, merren me probleme specifike për Internet Explorer. Më poshtë, do të gjeni një listë lidhjesh me një numër artikujsh që diskutojnë çështje të lidhura me float:
Ndryshimi i vetive float duke përdorur JavaScript
Për të ndryshuar një vlerë CSS në JavaScript, duhet të aksesoni stilin e objektit duke konvertuar vetinë e synuar CSS në një "Camel case." Për shembull, vetia CSS "margin-left" bëhet marginLeft, vetia e ngjyrës së sfondit bëhet BackgroundColor , dhe kështu me radhë. Por me veçorinë float, gjërat janë të ndryshme sepse fjala float është tashmë e rezervuar në JavaScript. Prandaj, sa vijon do të jetë e gabuar:
Stili. styleFloat = "majtas" ;
// Për të gjithë shfletuesit e tjerë
myDiv. stil. cssFloat = "majtas" ;
Përdorimi praktik i Float
Floats mund të përdoren për të zgjidhur një sërë problemesh në shënimin CSS. Disa shembuj janë përshkruar këtu.
2-kolona, gjerësi fikse
3 kolona, Struktura me lartësi të barabartë
Imazhi i lundruar me titull.
Ngjashëm me atë që diskutuam më parë në Float in Practice, Max Design përshkruan se si lundrimi i një imazhi me një titull lejon që teksti të mbështillet rreth tij në mënyrë natyrale.
Lundrimi horizontal me lista të pa renditura
Vetia float është një komponent kyç në kodimin e shiritave të navigimit horizontal të bazuar në sprite. Chris Spooner i Line25 përshkruan krijimin e Menu of Awesomeness, e cila etiketon
Për të demonstruar rëndësinë e vetive float në këtë shembull, këtu është një pamje e të njëjtit imazh pas përdorimit të firebug për të hequr float: majtas:
Galeritë e fotografive të bazuara në rrjet
Një përdorim i thjeshtë i veçorisë float është të float:left një seri fotosh të përfshira në një listë të pa renditur, e cila prodhon të njëjtin rezultat me atë që do të shihnit në shënimin e tabelës.
Faqja kryesore e produkteve të Kanadasë (shih imazhin më lart) shfaq produktet e saj në një format rrjeti pranë një shiriti anësor. Fotografitë shfaqen si një listë e pa renditur me një veçori float, për të gjithë
Faqja futons e Paragon Furniture (shih imazhin më lart) është një shembull tjetër i një faqe produkti që përdor një listë të parregulluar me etiketa të lundruara
Faqja e rezultateve të kërkimit të iStockphoto (shih imazhin më lart) ka të njëjtin rrjet fotografish të strukturuara, këtu fotot përmbajnë float:left
Radhitje fushat me një buton
Modelimi i elementeve të formës së paracaktuar për shfletues të ndryshëm mund të jetë problematik. Shpesh në një fushë formulari, siç është formulari i kërkimit, duhet të vendosni element pranë butonit "dërgo".
Në dizajnin modern të uebit, prona noton përdoret pothuajse në çdo hap. Por pavarësisht kësaj përhapjeje, jo të gjithë e kuptojnë mekanizmin e blloqeve lundruese, sjelljen e tyre dhe çfarë pasojash mund të ketë përdorimi i tyre.
Çfarë është "float"?
noton Kjo është një pronë e pozicionimit CSS. Për të kuptuar thelbin dhe origjinën e tij, duhet t'i kushtoni vëmendje modelit të printuar. Në paraqitjet e printuara, imazhi mund të pozicionohet në mënyrë që teksti të rrjedhë rreth tij. Kjo zakonisht quhet " mbështjellja e tekstit".
Në paraqitjen e faqes, një bllok që përmban tekst mund të specifikohet për t'u përdorur mbështjellja e tekstit rreth një imazhi ose injoroni mbështjelljen. Injorimi i mbështjelljes së tekstit do të lejojë që fjalët të rrjedhin mbi imazhin sikur të mos ishte aty. Kjo bën dallimin nëse imazhi është pjesë e rrjedhës në faqe apo jo. Në dizajnin e uebit gjithçka është shumë e ngjashme.
Në dizajnin e uebit, një element me një veti CSS aplikohet në të noton do të sillet si një imazh me tekst të mbështjellë rreth tij në një plan urbanistik të printuar. Elementet lundrues mbeten pjesë e rrjedhës së faqes së internetit. Kjo është krejt e ndryshme nga elementët e pozicionuar absolut, të cilët hiqen nga rrjedha, sikur në një paraqitje të printuar, bllokut të tekstit t'i ishte thënë të injoronte mbështjelljen e imazhit. Elementet e pozicionuar absolutisht nuk ndikojnë në vendosjen e elementeve të tjerë, dhe elementët e tjerë nuk ndikojnë në vendosjen e tyre.
Vendosja e një prone noton për elementët që përdorin CSS duket kështu:
#bari anësor (float: djathtas; )
Ekzistojnë katër vlera të vlefshme për pronën noton - majtas, drejtë, asnje, trashëgojnë. Dy të parat majtas Dhe drejtë tregoni drejtimin e vendndodhjes - majtas dhe djathtas, përkatësisht. Asnje- vlera e paracaktuar, tregon që elementi nuk është lundrues dhe trashëgojnë duke udhëzuar një element për të trashëguar vlerën e një prone noton nga elementi mëmë.
Për çfarë përdoret float?
Përtej shembullit të thjeshtë të mbështjelljes së tekstit rreth një imazhi, noton mund të përdoret për të krijuar paraqitje në internet.
noton, është gjithashtu i përshtatshëm për t'u përdorur për elementë të vegjël të paraqitjes. Për shembull, le të marrim këtë fragment të vogël të një faqe interneti. Nëse vendosim pronën noton Për një imazh të vogël avatar, kur ndryshon madhësia e imazhit, mbështjellja do të ndryshojë sipas dimensioneve të reja të imazhit:
E njëjta paraqitje mund të zbatohet duke përdorur pozicionimin relativ të kontejnerit dhe pozicionimin absolut të avatarit dhe tekstit brenda tij. Por në një plan urbanistik të zbatuar sipas kësaj skeme, ndryshimi i madhësisë së imazhit nuk do të ndikojë në bllokun e tekstit, pasi elementët me pozicionim absolut nuk prekin elementët e tjerë dhe elementët e tjerë nuk ndikojnë në to.
Rivendosja e mbështjelljes
Qartë pronë e lidhur me pronën noton. Element me grup pronash qartë nuk do të lëvizë lart rreth një elementi me grupin e vetive noton, por do të lëvizë poshtë duke injoruar rrjedhën. Dhe përsëri, një ilustrim që do të shpjegojë gjithçka pa vonesë.
Në shembullin e mësipërm, shiriti anësor lundronte në të djathtë të bllokut kryesor të përmbajtjes. "Foteri" është zhvendosur në hapësirën e lirë nën shiritin anësor, duke rrjedhur rreth bllokut me përmbajtjen kryesore. Për të zgjidhur këtë problem, duhet të specifikoni një vlerë për pronën e futerit clear:both për të "pastruar" rrjedhën rreth të dy kolonave.
#footer (e qartë: të dyja; )
Prona qartë ka katër kuptime. te dyja përdoret për të lehtësuar rrjedhën në të dy drejtimet. Majtas Dhe E drejta përdoren për të rivendosur një drejtim - majtas ose djathtas, përkatësisht. Asnje- vlera e paracaktuar. trashëgojnë mund të jetë vlera e pestë, por çuditërisht nuk mbështetet Internet Explorer. Rivendosja e vetëm rrjedhës majtas ose djathtas është mjaft e rrallë, por ka përfitime praktike.
Kolapsi i madh
Një gjë për të punuar me noton Ajo që është e çuditshme është efekti që kjo veti ka tek elementët prindër. Nëse elementi mëmë nuk përmban elementë të tjerë përveç një notues, atëherë lartësia e tij fjalë për fjalë shembet. Kjo nuk është gjithmonë e dukshme, veçanërisht nëse elementi prind nuk ka një sfond të spikatur, por është e rëndësishme të kihet parasysh.
Por alternativa e një kolapsi të tillë është edhe më e keqe. Merrni parasysh skenarin e mëposhtëm:
Nëse blloku i sipërm zgjerohet automatikisht për të akomoduar elementin lundrues, do të përfundojmë me një hendek në rrjedhën e tekstit midis paragrafëve, pa asnjë mënyrë për ta rregulluar atë. Nëse do të ishte kështu, atëherë zhvilluesit do të ankoheshin shumë më shpesh për këtë sjellje të blloqeve lundruese sesa tani për kolapsin.
Kolapsi duhet mbajtur gjithmonë parasysh për të parandaluar sjelljen e çuditshme të paraqitjes dhe problemet e ndër-shfletuesve. Ne mund ta zgjidhim këtë problem duke përdorur qartë pas elementit lundrues në enë, por përpara se kontejneri të mbyllet.
Teknikat e anulimit të mbështjelljes
Nëse jeni në një situatë ku e dini se ku do të jetë elementi tjetër, mund të përdorni clear:të dyja dhe të shkoni në biznesin tuaj. Kjo është ideale pasi nuk kërkon asnjë hack ose element shtesë. Por për fat të keq, zakonisht jo gjithçka shkon ashtu siç duam dhe në këtë rast mund të përdorni mjetet e mëposhtme.
Metoda e bllokut bosh.
Është fjalë për fjalë një bllok bosh.
. Ndonjëherë mund të gjesh një element
ose ndonjë element tjetër të rastësishëm, por div është më i zakonshmi pasi nuk ka stil të paracaktuar në shfletues, nuk ka funksion të veçantë dhe nuk ka gjasa të jetë në stilin e përgjithshëm CSS. Kjo metodë refuzohet nga puristët semantikë, sepse prania e saj nuk ka kuptim kontekstual në faqe dhe është vetëm për paraqitje. Sigurisht, në një kuptim të ngushtë kanë të drejtë, por ai bën punën e tij dhe nuk i bën keq askujt.
Metoda e tejmbushjes.
Bazuar në specifikimin e vetive CSS vërshoj për elementin prind. Nëse kjo veti është caktuar në auto ose i fshehur për elementin mëmë, ai do të zgjerohet pas elementit lundrues, duke rivendosur në mënyrë efektive mbështjelljen e elementeve të mëpasshëm. Kjo metodë mund të jetë e bukur semantikisht, pasi nuk kërkon elementë shtesë. Megjithatë, siç mund ta shihni ne kemi shtuar një të re div për të përdorur këtë metodë, e cila është e barabartë me përdorimin e një blloku bosh josemantik dhe është më pak fleksibël. Duhet mbajtur mend gjithashtu se prona vërshoj nuk ka për qëllim të çaktivizojë mbështjelljen. Kini kujdes që të mos fshehni aksidentalisht përmbajtjen ose të mos shkaktoni shirita të padëshiruar të lëvizjes.
Metoda e thjeshtë e pastrimit.
Përdor një pseudo-zgjedhës CSS (:pas) për të hequr mbështjelljen. Në vend të përdorimit të pronës vërshoj Për elementin prind, vendosni një klasë shtesë për të, për shembull "clearfix" dhe përdorni stilin e mëposhtëm CSS:
Clearfix:after (përmbajtja: "."; dukshmëria: e fshehur; shfaqja: bllok; lartësia: 0; e qartë: të dyja; )
Kjo përdor një pjesë të vogël përmbajtjeje të fshehur nga pamja, e vendosur pas elementit prind, i cili rivendos mbështjelljen. Kjo metodë nuk është e plotë, pasi duhet përmirësuar për të mbështetur shfletuesit më të vjetër.
Situata të ndryshme kërkojnë metoda të ndryshme të lehtësimit të bllofit. Le të marrim si shembull një rrjet të llojeve të ndryshme të blloqeve.
Për të kombinuar më mirë vizualisht blloqe të ngjashme, duhet të fillojmë një linjë të re kur ngjyra ndryshon. Mund të përdorim metodën e tejmbushjes ose të pastrimit të dritës nëse çdo grup ngjyrash ka një element prind. Ose përdorim metodën e bllokut bosh ndërmjet grupeve. Tre blloqe mëmë që nuk ekzistonin më parë ose tre blloqe boshe që nuk ekzistonin më parë. Varet nga ju që të vendosni se cila metodë është më e mirë.
Probleme me elementët lundrues
Elementet lundruese shpesh kritikohen për shkak të brishtësisë së tyre. Pjesa më e madhe e kësaj brishtësie vjen nga IE6 dhe ai gabime të orientuara drejt notit. Por ndërsa gjithnjë e më shumë zhvillues heqin mbështetjen për IE6, mund të mos mendoni për të, por për ata që kujdesen për pajtueshmërinë, këtu është një listë e shkurtër.
Pushdown, është një simptomë që elementi brenda bllokut lundrues është më i gjerë se ai bllok (kjo ndodh zakonisht me imazhet). Shumica e shfletuesve do ta bëjnë elementin e lundruar të dalë jashtë, por kjo nuk do të ketë asnjë efekt në paraqitjen. IE do të zgjerojë bllokun lundrues dhe shpesh kjo ka një efekt drastik në paraqitjen. Një shembull tipik është një imazh që del jashtë bllokut kryesor të përmbajtjes, duke e shtyrë shiritin anësor poshtë.
Zgjidhja e shpejtë e problemit: përdor tejmbushjen: i fshehur; për të hequr të tepërt.
Gabim me marzh të dyfishtë- një tjetër gjë për t'u mbajtur mend kur punoni me IE6. Ky bug shprehet në faktin se nëse fusha është në të njëjtën anë si ajo është e orientuar noton, fusha është dyfishuar. Për shembull:
Do të futim fushën e majtë 40 px., në vend të 20 px.
Zgjidhja e shpejtë e problemit: Vendosni ekranin: inline për bllokun lundrues dhe mos u shqetësoni se elementi do të mbetet në nivel blloku.
3px Jog. Thelbi i këtij gabimi është se teksti i vendosur pranë elementit lundrues zhvendoset çuditërisht me tre piksel, sikur nën ndikimin e një fushe force të vendosur rreth elementit lundrues. Zgjidhja e shpejtë e problemit: Vendosni gjerësinë dhe lartësinë e tekstit të prekur.
Shfaqet në IE7 Gabim në kufirin e poshtëm, kur elementi prind është një element lundrues dhe fëmija i tij që ndodhet brenda tij është gjithashtu një element lundrues. Marzhi i poshtëm (margjina-fund) i fëmijës injorohet nga elementi paraardhës. Zgjidhja e shpejtë e problemit: Përdorni padding-bottom në elementin prind në vend të margin-bottom në elementin fëmijë.
