Опитът за използване на CSS хак clearfix
Използвайки пространство вместо структура документ предотвратява нарушение.
Нека да разгледаме оригиналната форма на рана на clearfix, използвани преди това де факто, която е представена в една от най-оригиналните източници на този метод:
clearfix: след съдържание: "".
езика: блок;
височина: 0;
ясно: и двете;
видимост: скрит;
>
Обърнете внимание на стойността на съдържание собственост. Бях забелязал, че използването на знак "." като стойността за този имот, в някои случаи това води до нарушаване на зрителната структурата на документа. Това е така, защото използването на такъв код, след блока за която се прилага .clearfix клас (поради използването на псевдо-елемент .clearfix: след) генерира допълнителен блок елемент (езика: блок), съдържащ точка, която е на някои браузъри спънка. И това не е само Internet Explorer, и при определени обстоятелства, в зависимост от оформлението на страницата си, генериран от псевдо-точка може да предизвика проблеми и показване на документ в Firefox. За да изключите такива ситуации е необходимо да се замени стойността на съдържанието: "". пространство на съдържание знак: "". В резултат на тази процедура е била тествана и работи добре във всички браузъри. Аз успешно да я използват при създаването на клас .clearfix във всичките си проекти. В резултат на това ние имаме:
/ * Премахване на мястото и да го замените с интервал * /
.clearfix: след съдържание: "";
езика: блок;
височина: 0;
ясно: и двете;
видимост: скрит;
>
.
.
.
За да завършите реда нула от стойността на височината на шрифта.
Друг лошо точка, която е свързана с съвместимост се решава чрез добавяне на фрагмент свойства шрифта, последвано от неговите нулиране стойности:
/ * Нулева стойност на височината на шрифта елиминира потенциални проблеми * /
.clearfix: след съдържание: "";
езика: блок;
височина: 0;
ясно: и двете;
видимост: скрит;
шрифта: 0;
>
.
.
.
За някои това може да изглежда, че след предишното подобрение (на мястото на заместване от интервал), тази предпазна мярка не е необходимо (* Обикновено, браузъри игнорират всички допълнителни пространства. Но в този случай е в действителност, която напълно премахва възможността за генериране на произволен текст ) .. Но аз лично не ме интересува, защото аз съм привърженик на идеята да се използват всякакви методи за справяне с съвместимост различни браузъри и нейните проекти. И може би трябва да се използва този метод, преди да реши проблема с ценностите на замяна за свойствата на съдържание. Долната линия е, че няма гаранция, че всеки браузър не ще третира празното пространство като част от текст, така че е излишно метод за премахване на тази възможност. И въпросът за неговата обосновка ляво на гуру на CSS спецификация.
Да не се използва кода взето от ненадежден източник.
Освен това се счита в тази статия недостатъци на оригиналния код хак clearfix, който след като нашите производства са да стане ясно, че има много източници, както онлайн, така и в различни печатни медии, където можете да намерите не е съвсем правилна версия clearfix код. Като пример, да вземе прилична внимание J.W. книга Лоури - «CSS Hack # 038; Филтри ». Ето какво съдържа:
clearItem: след съдържание.
ясно: и двете;
височина: 0;
видимост: скрит;
езика: блок;
>
* Html .clearItem, * HTML .clearItem *
.clearItem
/ * Затвори коментирани Обратна наклонена черта Hack * /
Можете ли да се определи проблемните области в настоящия кодекс. В действителност, в този clearItem хак съдържа две грешки. Първата е да се използват неправилни стойности за вградени свойства на дисплея в средната CSS правило селектор в .clearItem. Този въпрос е бил повдигнат по-рано в оригиналната статия. където като стойностите за свойствата на дисплея в този случай се препоръчва да се използват редови блок. че отменя увийте в IE за Macintosh:
Г-н Лоури втори пропуск в cleaItem хитростта - присъствието на селектор * HTML .clearItem * в следния ред:
* Html .clearItem, * HTML .clearItem * * Html .clearItem, * HTML .clearItem *След отстраняването на които всички си дойде на мястото.
Какво заключение може да се направи от това? Това е много проста - да проверите отново кода си и не търсят лесния начин за успех, което може да доведе до съвсем друг резултат. Постоянно се помни, че за да греши е човешко, а дори и професионални програмисти и разработчици могат да направят грешка. Така че бъдете внимателни, ако използвате конвенционална копие поставете кода с оглед последващото му използване в техните проекти.
Сега всички, взети заедно.
Като се има предвид всички тези точки и направи съответните корекции в първоначалния вариант на рана Лесно ясен метод, ние получаваме следния пълнофункционален код clearfix:
/ * Леко променена, универсален clearfix хак * /
.clearfix: след видимост: скрит;
езика: блок;
шрифта: 0;
съдържание: "";
ясно: и двете;
височина: 0;
>
.clearfix
/ * Start коментира наклонена черта хак \ * /
* Html .clearfix
.clearfix
/ * Затвори коментира наклонена черта хак * /
Това е всичко. Надявам се, че по-горе код в тази статия най-популярният универсален хак clearfix и придружаващата информация ще ти се отрази добре.
* Повече информация по тази тема може да се намери в една статия от Крис Koyera - Автоматично анулиране на опаковка на деца.
За съжаление, ако го кажем.
За CMS все още не се разбира в горната платен опаковани CMS, а не това, което не си спомням, все още оказва, че набиран първата оформление, за да работи във всички браузъри, които искат на клиента, а след това в този план да добавите CMS модули, които лежат удобно управление на сайта, нито дори тези подправки.
Или аз съм зад пъти и сега е по-различно?
В WordPress, тичане ми страниците на уебсайта се генерират от флота по такъв начин, както е предвидено в системата. Подходяща е необходимо стилове се актуализират автоматично във файла style.css. За целите на стилове създава отделен файл и необходимите елементи се държат така, както аз трябва да.
Струва ми се, че е твърде рано holivar за използването на автопаркове. не може да разчита на тях сега ... Въпреки, че аз се опитвам да работя priminyat ги възможно най-малко. Все по-често се използва дисплей инлайн блок, дисплей маса и т.н. кутия оразмеряване граница кутия priminyayu в повечето случаи. На въпрос. И как мислите за това решение за clearfix
clearfix: след това,
.clearfix: преди съдържание: ";
дисплей: маса;
ширина: 100%;
ясно: и двете;
>