Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web servers, web development, networking and security services. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Lecţiile învăţate În ceea ce priveşte Clearfix CSS Hack

Eu folosesc CSS clearfix hack pe aproape toate site-urile mele. Hack clearfix - de asemenea, cunoscut sub numele de " Hack Poiana Easy "- este utilizat pentru a plutit clar divizii ( div e) fără a utiliza marcare structurale. Este foarte eficient în soluţionarea problemelor aspect şi incoerenţe browser-ul fara a fi nevoie să se amestece cu structura de prezentare. De-a lungul ultimilor ani, am luat notă de biţi mai multe utilă de informaţii cu privire la metoda Easy Clear. În acest articol, am rezuma aceste lecţii învăţate şi să prezinte o versiune (uşor) îmbunătăţită a hack clearfix..

Folosiţi un spaţiu în loc de un punct pentru a preveni ruperea aspecte

Aici este punerea în aplicare facto a hack clearfix, aşa cum este prezentat intr-unul din articolele originale care acoperă metoda:

.clearfix:after {
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Observaţi linia care conţine conţinut:; "." proprietate. Am constatat că în perioada (sau dot) specificată în ghilimele are o tendinta de urât pentru a sparge anumite aspecte. Prin adăugarea unui punct literal după clearfix. divizie (de exemplu, prin intermediul clearfix:. după selectorul), hack clearfix creează o piatră de poticnire pentru anumite browsere. Şi nu doar pentru Internet Explorer - în funcţie de aspectul, chiar Firefox va îneca un aspect pe declanşare pe o : după -bazate pe pseudo-dot. Soluţia la această haos de design subtil? Înlocuiţi dot literală, cu un spaţiu gol singur: "conţinut:" "; - acest truc sa dovedit a fi de succes, astfel în mod constant că am folosi acum ca proprietate implicit în fiecare hack clearfix care îl folosesc.

/* drop the dot, replace with space */
.clearfix:after {
     content: " "; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
     }
    .
    .
    .

Adauga un zero, font-size de proprietăţi pentru a face toate buna

O altă inconsecvenţă bizar implicat cu clearfixed (probabil nu este un verb real) aspecte pare să dispară atunci când font-size de proprietate este inclus în hack şi ulterior set la zero:

/* zero font-size added to prevent potential layout issues */
.clearfix:after {
     content: " "; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
     font-size: 0;
     }
    .
    .
    .

Acest lucru poate fi nejustificată atunci când se utilizează un spaţiu gol, în loc de un punct real (aşa cum este descris mai sus), dar eu sincer nu-mi pasă. Sunt ca un fel de CSS animale - folosind fiecare armă la dispoziţia lupte infernal aspect. Privind înapoi, cred că am putea au pus în aplicare această soluţie înainte de a descoperi fix gol-spaţiu. Cu toate acestea, unele browsere pot prelucra spatiu alb ca text, deci se poate dovedi benefică, totuşi. Poate, poate nu - am de gând să-l arunca acolo pentru voi toţi CSS guru la călătoria pe.

Feriţi-vă de dezinformare cu privire la această metodă

Nu, eu nu încerc să vă avertizeze împotriva sfaturile oferite în acest articol - veţi găsi acestea sunt destul de inofensive. În schimb, mă refer la informaţiile eronate gasite in alta parte pe internet şi chiar în formă tipărită. Aici este o prezentare a hack clearfix aşa cum sunt prezentate în cartea lui Joseph Lowery W. e altfel, excelentă, CSS Hack & Filtre :

.clearItem:after {
     content: ".";
     clear: both;
     height: 0;
     visibility: hidden;
     display: block;
}

.clearItem { display: inline; }

/* Start Commented Backslash Hack \*/
* html.clearItem, * html.clearItem * {height: 1%;}
.clearItem { display: block; }
/* Close Commented Backslash Hack */

Yikes! Nu vezi problema? De fapt, există două probleme potenţiale în domnului Lowery lui "clearItem." Hack. Prima dintre ele este folosirea dezaprobată de linie valoarea pentru afişare proprietate în mijlocul clearItem. declaraţie:

ClearItem {display: inline;}.

.. Cum sa discutat în articolul original, valoarea proprietăţii aici ar trebui să fie inline-bloc pentru a remedia pluteşte pe IE / Mac :

ClearItem {display: inline-block;}.

Defect al doilea domnului Lowery lui ". ClearItem" hack implică * * html clearItem. selectorul în următoarea linie:

* Html clearItem, html * * clearItem.. {Height: 1%;}

Selectorul de prima linie în această este tot ceea ce este necesar pentru a atinge un hack de succes. Două selector, cu toate acestea, stabileşte în mod eficient la înălţimea de 1% pentru toate browserele Internet Explorer. Acest lucru e de rahat, şi am aflat calea cea mai grea: după o lună sau cam asa ceva de folosirea acestui versiune a hack, am descoperit că în jurul valorii de jumătate din vizitatori meu (de exemplu, a celor care folosesc IE ) nu au putut pentru a lăsa comentarii, deoarece toate câmpurile formularului au fost doar 1 pixel înălţime! Din fericire, aceasta nu a luat prea mult timp pentru a ciocan jos vinovat: nefastă CSS selectorul de wildcard (  *  ), aşa cum se vede in codul de mai sus eronate. După ştergerea că selectorul de altă parte, tot ceea ce face clic.

Deci, ce e morala povestii aici? Simplă. Întotdeauna verificaţi codul şi înainte de a gândi critic orbeşte copierea si inserarea pe drumul spre victorie. Chiar şi scriitori profesionişti şi programatori face greşeli, astfel încât să fie asiguraţi-vă că acorde atenţie şi să nu presupuneri.

Toate împreună acum..

Punerea totul împreună şi combinarea acestor lecţii învăţate cu originalul (corect) versiune a metodei clar şi uşor, am de moda cu următorul text, pe deplin funcţional, defect de fixare clearfix formulă:

.clearItem:after {
     content: ".";
     clear: both;
     height: 0;
     visibility: hidden;
     display: block;
}

.clearItem { display: inline; }

/* Start Commented Backslash Hack \*/
* html.clearItem, * html.clearItem * {height: 1%;}
.clearItem { display: block; }
/* Close Commented Backslash Hack */

.. Si asta este o mantie! Sper că te-ai distrat la fel de mult cum am făcut în timp ce scriu acest articol.. dacă nu, sperăm că această rundă de "lecţii învăţate", aţi prezentat cu unele informaţii utile cu privire la omniprezent, mereu util hack clearfix. Şi, în cele din urmă, ca acest post se concentrează pe CSS, mă aştept nimic mai puţin decât severe de critica  1 cu privire la ideile prezentate aici. - Dă-i drumul, tot ce nebun CSS capete!;)

Notă

  • 1 Un pic de sarcasm pentru voi;)

Articole conexe

Published (Last edited): 10-10-2011 , source: http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/