Čítal to v nejakom blogu ... myslel, že to bolo príjemné pre katalogizáciu to pre budúce čj .... Tiež by mohli byť dôležitým rozhovor otázkou, ktorou by sa spýtal jedného dňa ....
Napíšte fragment CSS, ktoré sa zobrazí v modrej odsek v starších prehliadačoch, červené v novších prehliadačoch, zelenej a čiernej IE6 v IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Re-Cyklistika je Buzzword a vo vývoji webu to znamená nelíši. To šetrí energiu, pokiaľ ide o úsilie!
V priebehu rokov písania CSS a vytváranie HTML z návrhov, som sledoval niekoľko osvedčených postupov, v snahe ušetriť čas a energiu do toho, čo bežne termín ako "Re-vynájsť koleso". Znovu a znovu som si hovoril, že musím vytvoriť niekoľko šablón, niektoré štandardné znovu použiteľné CSS, ktoré by som použil Z krabice, v mojej ďalšej práci. Aj keď nie celkom, ale ja sa podarilo dosiahnuť určité ciele.
V podpore, opätovného použitia CSS, musel som sa pozrieť na niekoľko rámcov CSS, ktoré sú bežne dostupné na nás a rozhodli sa dať ich na použitie, pretože sú osvedčené a vytvorený veľa skúsených vývojárov a než som ja. Ešte dôležitejšie je "STYKU znovuobjavovania".
Aj keď všeobecne známe, na veterány, som sa snažil pera niektoré kľúčové pojmy / osvedčené postupy / myšlienky, že odišla do tvorby týchto rámcov, aby RE-Cycling CSS je to možné. Dúfam, že to pomôže niektoré CSS vývojárov, ktorí sú práve v tej dobe a nedávno nastúpil do rozbehnutého vlaku CSS!
Používajte konvencie pomenovania
To musí byť najdôležitejším faktorom pri vytváraní CSS / HTML znova použiteľný. Dať konzistentné mená na stránku prvkov umožňuje opätovné použitie stránok zložiek a ich štýly s málo alebo úpravami. V súlade s týmto argumentom, aj HTML5, výraznú zmenu zmenu v priebehu jeho predchodcovia, je zaviesť nejakú štrukturálne tagy viď. <article>, <section>, <header>, <aside> a <nav> [ Čo bude HTML5 prinesie? ]. Aj s HTML 4 (alebo nižšia), je najlepšie pomenovať štandardné časti stránky consistanly ako v jednoduchom príklade dole ...
Pamätajte si, že väčšina stránok na vašom projekte, skončiť majú rovnaké základné stavebné prvky. Identifikovať tieto spoločné prvky hlavných stránok ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Obnoviť predvolené štýly (CSS Obnoví): Či už používate rámca, alebo napísať vlastný, je nutné zadať CSS Obnoví [ Čo sú CSS Obnoví? ], pretože zníženie alebo odstránenie niekedy vizuálne nezrovnalosti, ktoré sa vyskytujú medzi rôznymi prehliadačmi. Jednoducho povedané reset CSS mechanizmus nastavuje štýly HTML elementu na nulu alebo null hodnôt, ktoré nahradia akékoľvek hodnoty prehliadača predvolené môžu predstavuje. To poskytuje čistý štít pre nastavenie vlastností týchto prvkov prázdnoty všetkých User-Agent predvolené [ CSS2.1 User Agent predvolené nastavenie štýlov ]. Všetky CSS rámca sa majú resetu mechanizmu. Ak píšete si vlastný CSS Obnoví, pozor je, že ak sa stane, že zabudnete obnoviť kľúčovú vlastnosť, mohlo by to viesť ku cross-browser otázok, ktoré sú veľmi ťažké ladiť. Pamätajte si, že Majte kópiu resetu štýlov a pustiť ich do každého nového projektu, ktorý vytvoríte.
telo, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, vopred, formulár, fieldset, vstupné, výber, textarea, p, blockquote, stolný, th, td { hranice: 0px; margin: 0; padding: 0; }
Nastaviť predvolené (základné štýly) do prvkov:
Po nastavení (na nulu alebo null) predvolené hodnoty niektorých atribútov niektorých prvkov HTML, je nutné použiť niektoré štýly naprieč všetkými stupňami týchto prvkov. Tieto nastavenia sa môže líšiť podľa návrhu alebo podľa osvedčených postupov, ktoré sledujete.
Väčšina CSS rámcov, a to vždy prináša niekoľko nových hodnoty, okrem resetovanie štýly predvolený prehliadač.
Tieto predvolené hodnoty sú neplatné z User-Agent východzích nastavení odstránený z Obnoviť CSS), budú tieto byť v rámci prehliadača.
Pamätajte, že Základné štýly slúži na nastavenie štýlov, ktoré sa chystáte použiť design-široký. napr.
html {font-size: 77%; font-family: Arial, sans-serif;} silný, h1, h2, h3, h4, h5, h6 {font-weight: bold;}
Abstraktné Štýly pre HTML spoločných komponentov a spoločných tried:
Väčšina projektov sa skladá z niekoľkých strán má spoločné prvky HTML používajú v mieste, pre napr nejaké upozornenia foriem, a chyby, vlastné vyskakovacie okná a Lightbox atď Keďže tieto komponenty sú používané znovu naprieč projekty, bude užitočné, aby sada tried spojených s preddefinovanými štýlmi týchto zložiek a môžete ušetriť veľa času.
Okrem definovania opakovane štýly definícia spoločných HTML komponentov, mohli by sme abstraktné štýly triedy týkajúce sa typografie, farby alebo dokonca usporiadanie. Ja sám som skôr použiť ... bežnej triedy, ako je Clearfix a Font08 a FontGrey a AlignL a DisplayB atď
Formulár vstup {border: 0px; pozadia: # FFFFFF; padding: 0px 10px; _padding: 0px 0px, výška: 26px; color: # 000000; line-height: 30px; font-size: 1.1E;} Formulár textarea {border: 0px; pozadia: # FFFFFF; color: # 000000; font-size: .9 em, line-height: 1.5em; overflow: visible;} . Fbold {font-weight: bold; color: # CCCCCC;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . Clearfix {jasne: obaja;} . Delič {border-top: 1px solid # 647B06, border-bottom: 1px solid # 9CC00A, výška: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: právo}. Alignc {text-align: stred} . Floatr {float: právo;}. Floatl {float: left;}
Opravy na bežné prehliadače vtipy
Rôzne prehliadače implementovať CSS kódu a poskytujú rôznu úroveň podpory pre špecifikáciu CSS. Výsledkom toho .... "Prehliadače Quirks", že my, vývojári sú ponechané riešiť. Zvlášť, IE6 straší väčšinu CSS kódery s termínom stretnúť. Dobrou správou je, skúsenosti dohromady možné opakovane opravy k týmto otázkam (často označované ako CSS hacks ).
Pamätajte si, že Udržujte tieto predajné ľudí / opravy ruky
/ * Nasledujúci zoom: 1 pravidlo je špeciálne určený pre IE6 + IE7. * / * Html. Clearfix, *:. Prvé dieťa + html {clearfix zoom: 1; }
Majte upresňovanie CSS
Konečne. Ak ste sa inšpirovať a použiť jednu alebo viac rámcov CSS, Heres je stručný prehľad niekoľkých populárnych ty ....
Pamätajte si, že pomocou CSS rámcov neznamená, že ste leniví, aby si vytvorte svoje vlastné ... To znamená, že ste chytrí učiť sa od ostatných skúseností a chýb, ušetriť čas a zvýšiť produktivitu!!
CSS dokončené 10 rokov existencie tohto roka! Tí, ktorí boli nejakú dobu, si zarábajú na chlieb (alebo nie) pomocou CSS, potom by ste mali vedomí toho, ako sme boli hladní po dobrým výberom písma. Aj s nedostatkom písma dizajnéri ako tie, na CSS Zen Garden využili obrázkov na pozadí CSS nahradiť fonty v snahe o tom nejakú spravodlivosť do svojich návrhov. Tiež sme sa pokúsili Flash / JavaScript ® hacky na dosiahnutie našich cieľov návrhu. V žiadnom prípade to je zlý spôsob, ako dostať fonty sme žiadosť do našich návrhov, ale rozhodne nie je spôsob, ako najviac žiaduce. a viac rokov web designer, rovnako ako ja, plne spoliehal na desať alebo tak písma pre ich vykonanie.
Posledný vývoj na webových štandardov a formátov písiem, aby bolo možné urobiť HTML text v písmach iných ako rovnaké východiskové starých písiem. Dodáva sa v "@" fontface decleration CSS.
@ Fontface provids riešenie prepojenia na aktuálne fontu a získať ho z webu. Pomocou znak @ fontface môžu návrhári pomocou písma, bez toho aby museli zmraziť text ako obrázky na pozadí. Implementácie je veľmi priamočiara, ako je uvedené nižšie, ale ako všetky dobré veci majú CON časť k nemu, nie všetky prehliadače podporujú jeden "typ písma". Ak plánujete používať znak @ fontface v mieste s krížovou prehliadača vyžaduje podporu, potom budete musieť poskytnúť zdroje pre rôzne typy písma vedľajšej rovnaké.
Použitie znak @ fontface
@ Font-face { font-family: "CalligraphyFLFRegular"; src: url ("CalligraphyFLF.eot '); src: miestne ("CalligraphyFLF"), miestne ("CalligraphyFLF"), url ("CalligraphyFLF.woff") formát ("woff"), url ("CalligraphyFLF.ttf") formát ("TrueType"), url ("CalligraphyFLF . svg # CalligraphyFLF ") formátu ('SVG'); } @ Font-face { font-family: "Vaša písmo"; src: url ("/ font_filename.eot písma"); src: miestne ("Alternatívne meno"), miestne ("Alternatename"), url ("/ font_filename.woff písma") formát ("woff"), url ("/ font_filename.otf písma") formát ("OpenType"), url ("Písma / font_filename.svg Č font_filename") formát ("SVG"); } h2 {font-family: "Vaša písmo", Gruzínsko, serif;}
Ako môžete vidieť z vyššie uvedeného príkladu, ktorý zahŕňa zvolený font písma, je potrebné sa odkaz na súbor fonttypes za rovnaké písmo. Preto ľudia sa odvolávajú na to ako "Písmo Kit".
Tam sú k dispozícii sady písma, ktorý výslovne umožňuje prepojenie s CSS @ font-face vlastníctvo k nemu na základe licenčnej zmluvy koncového používateľa (EULA).
Užitočné WebFont zdroje:
Čas a znova, keď všetky ostatné prehliadače vidieť, ako sa správať povedal podľa pravidiel W3C, teda špirály vás z vývoja ducha tým, že hodí zlosť, že sa nezdá, že má opravu. Len taký človek je tento problém v IE7.
Problém vyhlásenie:
Ja, a tak mohla veľa z iných vážnych webových vývojárov si všimli viac než mnohé časy, že keď tam vložený plaváky v rozvrhnutí, na vznášať sa nad niektorými odkazy (kotviace tagy), obsahujúci kontajner zdá posunúť o pár pixelov vpravo . Snažil som sa google riešenie tohto problému, ale ťažko nájsť akúkoľvek rozumnú odpoveď, prečo a kedy k nej dôjde (to by mohlo pomôcť zabrániť tomuto problému deje), a preto som nikdy nenašiel jednoznačné riešenie problému buď ...
Možné riešenie:
Zo skúsenosti, mám upozornenia 90% percent z časov, tj, že tento problém je vyriešený tým, že pridá zoom majetok v definícii CSS na mis-chová kontajnera ...
# {Somediv zoom: 1; }
opäť dôvody sú nejasné ... skúste to ...
Niektoré prvky v IE majú "hasLayout" vlastnosť, ktorá je "pravda" v predvolenom nastavení. Mnoho vizuálne CSS správanie, napríklad alfa filter pracuje len na prvok, ktorý hasLayout. a {zoom: 1} Zdá sa, že dať zameriavajúce sa na prvky na hasLayout vlastnosť .... Užitočné? I dont, že áno ...
Zoom vlastnosť je tiež vyzerá, že podporuje Chrome, ale jeho použitie dint Zdá sa, že veľký negatívny vplyv na moje dispozície ... skúste to, keď to funguje u vás ... ak sa tak nestane, záložku tejto stránky v kocky "CSS"
Včera, po vydaní som sa stretla s CSS reset vo prehliadača Google Chrome ... Myslel som kopať trochu hlbšie do oblasti užívateľských listov Agent štýl ...
Našiel túto tabuľku na predvolené hodnoty CSS2.1 užívateľa listy Agent štýl ... (pre tých, ktorí nevedia o čo "User Agent Style Sheets, je nasledovať Čo je Užívateľ listy Agent Style (špecifikácie) .
Pre úplný zoznam CSS 2.1 User Agent predvolené štýlov kliknite tu
Včera, ako každý iný "Deň pozemného Hog", som pracoval na niektorých CSS / beztabulkový rozvrhnutie. Všetko išlo dobre v IE 7, FF 3 a Chrome, až do roku náhle som videl, niektoré nie-ignorable rozpätie videnie iba v prehliadači Google Chrome. Hoci veľmi podivné a worring, to bola nejaká nová chyba / problém, ktorý som prišiel naproti cez, tam bol nakoniec niektoré korenia vo svojej svetskej prácu. Sad (ale pekný) sa dostal určujú počas niekoľkých minút sondy ...
V podstate to vyzeralo, že Google Chrome ignoroval moju CSS Obnoví ods margin: 0px). V skutočnosti to bolo spôsobené štýlom užívateľského agenta (-WebKit-padding-štart: 40px). Takže riešenie bolo obnoviť tento štýl nastavením padding: 0 nespráva prvky.
Dobrým spôsobom, ako predísť tomuto problému deje na akúkoľvek časť je použiť globálne CSS Rest takto
* {Margin: 0; padding: 0;}
Čo je to užívateľa listy Agent Style (špecifikácie)?
Nasledujúci úryvok je prevzatý z http://meiert.com/en/blog/20070922/user-agent-style-sheets/ ~ ~ HEAD = pobj a následných odkazu sa dozviete viac na užívateľa listy Agent štýlu
CSS 1 predstaví myšlienku tým, že každá User Agent (UA, často "webový prehliadač" alebo "webový klient"), bude mať predvolený štýly, ktoré predstavuje dokumenty v prijateľnej - ale pravdepodobne všedný - spôsob. CSS 2 hovorí, že vyhovujúce užívateľské jednotky sa musia použiť štandardné štýly (alebo sa správajú, ako keby tomu tak bolo), a že užívateľský agent defaultne štýlov by mala predložiť prvky dokumentu jazyk v cestách, ktoré spĺňajú všeobecné prezentácie očakávania jazyk dokumentu, CSS 3 je pravdepodobne rovnaké mysli.
Vzhľadom k tomu, CSS špecifikácia ponechať na implementáciu, či sa používajú "skutočný" štýlov pre predvolené zobrazenie, alebo nie, to nie je prekvapujúce, že sa vám nepodarilo nájsť predvolenú šablónu štýlov v každom prehliadači je inštalačný zložky. Na rozdiel od Internet Explorera spoločnosti Microsoft, rovnako ako opera, napríklad (a pokiaľ je mi známe), Gecko prehliadače ako Firefox a Netscape Navigator (pozrite sa na "html.css"), ale aj Konqueror, aby bolo pomerne jednoduché pochopiť ich predvolený štýl.
Ďalšie rýchla tut. Tu je niečo jednoduché a príjemné použitie sily CSS ... ale bolo ťažké poňať (a to určite nebol ja) začať. Pridanie Dropshadow, môže byť peice torte pre mnohých z nás, používať niektoré nástroje pre úpravu obrazu, ako Photoshop ANF ohňostrojov atď
Dôvod, prečo som sa rozhodla pre tieni pomocou CSS je, že obvykle pri vytváraní stránky design / html žiadosti, aby požiadavky iterácie. Čo chcem povedať je, Vo existujúce webové stránky s mnohými obrázkami, ako sú tie, zobrazujúci freinds zoznam alebo galériu obrazu, to bude ťažké znovu spracovať celý zaťaženie obrázkov, ktoré už boli vyložené pridať alebo odstrániť tiene, pre ktoré záležitosť.
Takže ak ste urobili trochu myslia dopredu a vytvorili HTMLS pridať tieto ďalšie divízie, alebo sa obvykle situácia taká, že máte Loop Logic generujúce tieto ikony / náhľadmi v XSL, PHP. JAVA alebo akékoľvek iné programovací / skriptovací jazyk, môžete ho pridať kedykoľvek, potom je len otázkou show a skrýva tieto tiene pomocou CSS vlastnosť Display, ako na klientov, stále sa meniace požiadavky na ... Ešte si sa urobil som tento druh myslia dopredu pred tým ... ale ahev začala teraz!
V nižšie uvedenom príklade, pôvodný obrázok tieni zadarmo a dropshadows sú použité podľa potreby! Tiež som išiel niečo navyše, pomocou trikov z mojich predchádzajúcich Tutanchamóna v Well! To asi sú najkratšie množstvo cvičení, tak to je oprávnená len vtedy, volať je "Tut" 'y) na použitie CSS vlastnosť klip pre predviesť iba
Prečo chcem to pochopiť?? Humm ...!!
Väčšina spisovateľov CSS by sa zhodujú, že CSS vlastnosť Clip je pravdepodobne jedným z najviac un-používané vlastnosti CSS. Bolo to tak aj môj prípad a bol najviac šťastný, že zanedbávať to, kým som začal úpravou MooTools TWO Knob (PIN) Slider komponenty (s prechádzajúcom Indicator) .
Tam bol dobrý návrh od jedného z čiastkových užívateľov upraviť pomocou komponenty Slider pripnutý zázemie obrázkov (proti premennú šírku divízie), čo znamená posuvník rozsah. Tak prišiel môj čas vstúpiť na zábavu, ale nie-znalca (Samozrejme pre mňa) vody z majetku Galéria CSS.
No! aké ťažké to môže byť? Nič moc ... áno aj nie. Syntax clip CSS vlastnosť je dosť vzpriamené, ale význam / usuage je trochu croocked. S pamäťou ako ja, zakaždým sedím prepracovať na mojom Slider Script ... Mám tokeep odkazuje späť na použitie tohto majetku CLIP, pripomenul sám sebe logiku, ktoré som vytvoril vo svojom skripte .... Preto! myšlienka pera dole, s nádejou, ako si pamätať, že budúcnosť (a tiež v prospech tých, ktorí sa zdajú boggled v majetku Galéria CSS)
Čo CSS klip robiť?
Klip je súčasťou vizuálnych efektov modulu CSS 2.1. Jednoducho povedané, jeho úlohou je umiestniť viditeľné okno v hornej časti objektu, ktorý je pripnutý, teda orezanie snímok a vytváranie náhľadov bez nutnosti vytvárať ďalšie súbory v už som dal túto funkciu k lepšiemu využitiu v komponente Slider 
)
Pomocou vlastnosti Clip CSS, môžete vytvoriť výstrižok pomocou tvar rect. Ako mnoho iných vlastností CSS (ako okraj, zateplenie atď), za použitia rect vyžaduje štyri súradnice hore, vpravo, dole, vľavo (TRBL). Croocked povaha tohto majetku zodpovedá, keď sa bližšie pozrieť na to, ako klip vypočítava orezovú oblasť, používať tieto štyri súradnice (vysiela mozog do hoďte na chvíľu). Teraz sa zmiasť dole začína od hornej a pravý začína zľava. . Vidíš, čo som povedal? .... Preto tento príspevok ...
Tento malý zmätok môže ľahko zmiznúť, s týmto vysvetlením vizuálne CSS Galéria / rect majetku, ktorý je nižšie!!
Úloha sme začali, je klip na nasledujúce miniatúry do hranatejšie hľadá obrazu (a tiež širokouhlý obraz)
| |  |
| Pôvodný Thumbnal / Image | Clip Požiadavky na radové Thumbmail |
Zobraziť Demo záložky | Stiahnuť sourcefiles
Než sme sa museli vysporiadať s CSS vytvoriť naše rozloženie stránky, zarovnanie nejaký obsah vnútri bunky tabuľky zdalo Proste hračkou. Stačí zadať "zladiť" alebo "valign" vlastnosť tabuľky majú zarovnanie podľa vášho výberu, kúsok torty!
S rozvrhnutie CSS, keď máme "vertical-align" vlastnosť prvkov, sa nezdá byť tak jednoduché, ako "zladiť" alebo "valign" vlastností. Chcete byť viac konkrétny "vertical-align" nikdy sa zdá k riešeniu niektorý z vašich problémov, najmä ak sú napísať kus cross-browser CSS.
Bez použitia HTML tabuliek, problém sa sústrediť na objekte, či už je to nejaký obrázok alebo text v obsahujúci divízie, bol pravdepodobne každý UI / CSS vývojári nočná mora, na nejakom mieste. Tento problém ďalej extrapoluje svoje starosti v prispôsobení, ak je objekt, ktorý sa uprostred je dynamický charakter, tj keď jeho výška je premenlivá (neznáme výška).
Hoci neexistuje žiadna známa priamočiare riešenie, ktoré bude pracovať v celej rade prehliadačov, ktoré musíme riešiť, riešenie, ktoré som sa snažil prísť k sa zdá pracovať v niekoľkých prehliadačoch, ktoré som sa snažil ho (IE6, IE 7 , FF).
RIEŠENIE:
V prehliadačoch, ako je Mozilla, Opera a Safari divne chová "vertical-align" majetok môže byť podaná k rozumu, jednoducho nastavením "display" vlastnosť obsahujúce divízie "stolové bunky" (display: table-cell) .
Problémom stále zostáva s IE rodiny prehliadačov, ktorý, ale nezdá sa, že pochopili, čo majú s "table-cell" majetku a nevedomým, ako sú, jednoducho ignorovať. Riešenie uvedené nižšie, hoci jednoduchý, inzeráty niekoľkých viac DOM elementy do HTML robiť veci sa stávajú.
CSS a HTML vyzerá takto
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> zobrazení: 3456 </ div>
</ Div>
</ Div>
Výsledok vyzerá takto: -
Pozrite sa na demo tu záložky | na stiahnutie Zdrojové súbory (stiahnuté 454 krát)
TOP Zarovnanie CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> zobrazení: 1234 </ div>
</ Div>
</ Div>
Výsledok vyzerá takto: -
SPODNÁ Zarovnanie CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> zobrazení: 1234 </ div>
</ Div>
</ Div>
Výsledok vyzerá takto: -
Pozrite sa na demo tu | Na stiahnutie tu
Vyzerá to, že starne, pretože som sa snažil nájsť rozumné riešenie tohto problému zarovnanie. Ale teraz s týmto riešením, sa cítim trochu pokoja.
S nádejou, že jedného dňa
Stiahnite si CSS a HTML vyššie uvedené riešenie tu (stiahnuté 454 krát) .. na zrozumiteľnosti, je CSS nie je optimalizovaná
PS: A mimochodom, to sú náhľady niektorých obrázkov som klikli ...
CSS pre Non-IE prehliadačov: Jeho žiadne správy pre vývojárov, že CSS, CSS selektory deti ako na nižšie uvedenom príklade sa nezdá pracovať v IE.
napr div> p {} niektoré css, to znamená, že "keď span prvkom je dieťa (a nie vnuk alebo veľká slávnostná dieťa atď) z divízie prvku".
Ale sme použili tomto kontexte v náš prospech. Historicky, dieťa volič sa používa na skrytie CSS príkazy z IE. Jednoducho tým, že umiestnia html>body pred akoukoľvek CSS položku Internet Explorer bude ignorovať:
html>body .foo { CSS commands go here ;}
Toto pracuje, pretože <body> je vždy dieťa <html> - to možno samozrejme nikdy vnuk alebo pravnuk z <html> .
Teraz, že IE 7 chápe dieťa voliča, musíte vložiť prázdnu značku komentáre sa priamo po viac ako znamienko IE 7 potom nechápem tento volič (kto vie prečo!?), A bude teda úplne ignorovať tento príkaz CSS.:
html> /**/ body .foo { CSS commands go here ;}
Ak ste nedostali už videli tieto skôr, majú prečítajte si nasledujúce rovnako
