Tapasztalat a css hack clearfix
Egy hely, hanem egy dokumentum szerkezetét megakadályozza megsértése.
Nézzük meg az eredeti alakját a clearfix hack, korábban de facto, amely képviselteti magát az egyik az eredeti források ezt a módszert:
clearfix: miután tartalom: "".
display: block;
magasság: 0;
clear: both;
visibility: hidden;
>
Ügyeljen arra, hogy a tartalmat ingatlan értékét. Észrevettem, hogy a használata a „” az érték az adott tulajdonság, bizonyos esetekben azt eredményezi, hogy zavar a dokumentum vizuális szerkezetét. Ez azért van, mert az ilyen kódot, miután a blokkot, amelyre alkalmazzák .clearfix osztály (használata miatt a pszeudo-elem .clearfix: miután) generál egy kiegészítő blokk elem (display: block), amely tartalmazza azt a pontot, hogy bizonyos böngésző akadályt. És ez nem csak az Internet Explorer, és bizonyos körülmények között, attól függően, hogy az oldal elrendezésének által generált egy ál-pont problémákat okozhat, és megjeleníti a dokumentum Firefox. Hogy az ilyen esetekben szükséges cserélni az érték a tartalom: „”. hely megjelölés tartalom: „”. Az ezen eljárás eredményeként tesztelt és működik minden böngészőben. Sikeresen használják, amikor létrehoz egy osztály .clearfix minden projektjeiket. Ennek eredményeként, van:
/ * Vegye ki a pontot, és helyette egy hely * /
.clearfix: miután tartalom: "";
display: block;
magasság: 0;
clear: both;
visibility: hidden;
>
.
.
.
Hogy teljes legyen a sorrendben nulla ki az értéke a font magassága.
Egy másik rossz pont, amely társított kompatibilitás hozzáadásával oldják meg a részlet tulajdonságok font-size, ezt követően a nullázás értékek:
/ * Nulla az értéke a font magassága kiküszöböli az esetleges problémákat * /
.clearfix: miután tartalom: "";
display: block;
magasság: 0;
clear: both;
visibility: hidden;
font-size: 0;
>
.
.
.
Bizonyos úgy tűnhet, hogy az előző után javulás (a helyettesítés pontjához szóközzel), ez az óvatosság felesleges (* Jellemzően böngészők figyelmen kívül hagyja az összes felesleges szóközöket. De ebben az esetben valójában, ami teljesen megszünteti a lehetőségét generációs bármilyen szöveges ) .. De én személy szerint nem érdekel, mert én vagyok a híve az ötlet bármilyen módszer foglalkozó cross-böngésző kompatibilitási és projekteket. És talán én ezt a módszert használni, mielőtt oldotta meg a problémát a helyettesítési értékeket a tulajdonságok a tartalom. A lényeg az, hogy nincs garancia arra, hogy minden böngésző nem kezeli az üres tér, mint egy darab szöveget, ezért felesleges eljárás megszüntetésére ezt a lehetőséget. És a kérdés, ennek igazolása elhagyta a CSS specifikáció guru.
Ne használja a kódot vett egy megbízható forrásból.
Továbbá figyelembe venni ezt a cikket hibák az eredeti kódot, hack clearfix, ami után mi eljárásban nyilvánvalóvá vált, sok forrás, mind online, mind a különböző nyomtatott média, ahol megtalálhatja nem egészen megfelelő verziója clearfix kódot. Példaként hogy egy tisztességes figyelmet W. könyv Lowery - «CSS Hack # 038; Szűrők ». Itt van, amit tartalmaz:
clearItem: miután tartalmat.
clear: both;
magasság: 0;
visibility: hidden;
display: block;
>
* Html .clearItem * html .clearItem *
.clearItem
/ * Bezárása hozzászólt Backslash Hack * /
Tud magát meghatározni a problémás területeket a jelen kódot. Tény, hogy ebben clearItem hack két hibát tartalmaz. Az első az, hogy helytelen értékeket az inline kijelző tulajdonságok átlagosan CSS szabály választó c .clearItem. Ez a kérdés merült fel korábban az eredeti cikket. ahol az értékeket a tulajdonságait a kijelzőn ebben az esetben ajánlatos használni inline-block. amely megszünteti csomagolja IE a Macintosh:
Mr. Lowery második mulasztás az ő cleaItem hack - jelenlétében választó * html .clearItem * a következő sort:
* Html .clearItem * html .clearItem * * Html .clearItem * html .clearItem *Miután amelynek eltávolítása minden a helyére került.
Milyen következtetést lehet levonni? Ez nagyon egyszerű - ha kétszer ellenőrizze a kódot, és ne keresse a könnyű utat a sikerhez, ami oda vezethet, hogy egy teljesen más eredményt. Folyamatosan emlékezni, hogy tévedni emberi, sőt professzionális programozók és a fejlesztők hibázik. Ezért legyünk óvatosak, ha használja a szokásos copy-paste a kódot, azzal a céllal, hogy annak további felhasználása a projektek.
Most tedd össze az egészet.
Figyelembe véve az összes fenti pontokat, és így a megfelelő kiigazításokat az eredeti változata a hack Easy egyértelmű módszer, megkapjuk a következő teljes értékű kód clearfix:
/ * Némileg módosított, sokoldalú clearfix hack * /
.clearfix: miután visibility: hidden;
display: block;
font-size: 0;
tartalom: "";
clear: both;
magasság: 0;
>
.clearfix
/ * Indítás hozzászólt backslash hack \ * /
* Html .clearfix
.clearfix
/ * Bezárása hozzászólt backslash hack * /
Ez minden. Remélem, hogy a fenti kód ebben a cikkben a legnépszerűbb univerzális hack clearfix és kísérő információk jót fog tenni.
* További információ ebben a témában megtalálható egy cikket Chris Koyera - Automatikus törlését csomagolás gyerekek.
Bocs, ha nyersen fogalmazzak.
Mintegy CMS még mindig nem értik az első fizetett csomagolt CMS, nem az, amit nem emlékszem, még kiderül, hogy typeset az első elrendezés, hogy működik minden böngészőben, akik az ügyfél, majd ezt az elrendezést hozzá CMS modulok kényelmesen feküdjön kezeli a helyén, még azok sem fűszerek.
Vagy én vagyok maradi, és most ez más?
A WordPress, futtatni a webhely oldalainak létrehozása a flotta oly módon, feltéve, hogy a rendszer. Releváns szükséges stílusok automatikusan frissülnek a style.css fájlt. Céljából a stílusok létre egy külön fájlban, és a szükséges elemek viselkednek, ahogy azt kell.
Számomra úgy tűnik, hogy még túl korai holivar használatáról szóló flották. nem nélkülözheti őket most ... Bár igyekszem dolgozni priminyat őket a lehető legkevesebbet. Egyre használni megjelenítési inline-block, megjelenített táblázatban stb doboz méretre border-box priminyayu a legtöbb esetben. Egy témáról. És hogyan érzel ezt a döntést clearfix
clearfix: miután,
.clearfix: mielőtt tartalom: »;
display: table;
szélesség: 100%;
clear: both;
>