Oli lukenut tämä jollain blogissa ... mielestä se oli kiva luetteloida tätä tulevien ref .... voi myös olla tärkeä haastattelussa kysymykseen, että sinulla olisi pyytänyt joskus ....
Kirjoita pätkä CSS näkyy kappaleen sinisellä vanhemmilla selaimilla, punainen uudemmissa selaimissa, vihreä IE6 ja musta IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Kierrätyksestä on Buzzword ja web-kehitys se tarkoittaa eroa. Se säästää energiaa, suhteen vaivaa!
Yli vuoden kirjoittamisen CSS ja luoda HTML-malleja, olen seurannut joitakin parhaita käytäntöjä, harjoittamisesta säästää aikaa ja energiaa, mitä me yleensä termiä "uudelleen keksimisestä Wheel". Kerta toisensa jälkeen olen kertonut itselleni, että minun on luotava muutamia malleja, jotkut vakio uudelleenkäyttävissä CSS olisin hyödyn irti BOX minun tulevassa työssään. Vaikka ei täysin, mutta en onnistunut saavuttaa joitakin tavoitteita.
Vuonna edistää, uudelleenkäyttö CSS, minulla oli tarkastella muutamia CSS puitteet, jotka ovat yleisesti saatavilla meille ja päätti laittaa ne käyttöön, koska ne ovat testattu ja luotu paljon kokeneita kehittäjiä, kuin itseäni. Vielä tärkeämpää "Vältä uudelleen keksimisestä".
Vaikka yleisesti tiedossa veteraaneille, olen yrittänyt kynä joitakin keskeisiä käsitteitä / parhaita käytäntöjä / ajatuksia menneen luomaan näissä puitteissa, jotta kierrätystä CSS mahdollista. Toivottavasti tämä auttaa joitakin CSS kehittäjille, jotka ovat juuri tulossa, ja viime aikoina nousseet CSS bandwagon!
Käytä nimeämistavat
Tämä on tärkein tekijä, mikä CSS / HTML uudelleen käytettävissä. Antaminen johdonmukaisia nimiä sivulle osia mahdollistaa uudelleenkäytön sivun osien ja niiden tyyliä vähän tai muutoksin. Tämän mukaisesti väitteen, vaikka HTML5, suuria muutoksia muuttuvat ajan edeltäjänsä, on esitellä joitakin rakenteellisia tunnisteet eli. <article>, <section>, <header>, <aside> ja <nav> [ Mitä HTML5 tuo? ]. Vaikka HTML 4 (tai alempi), on parasta nimetä vakio osia sivusi consistanly kuten yksinkertainen esimerkki alla ...
Muista, että useimmat sivuihin projektin loppuun asti ottaa sama ydin rakenneosat. Tunnista nämä yhteiset keskeiset sivuelementti ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Pal Tyylit (CSS Nollaa): Käytitpä kehyksen tai kirjoita, sinun on annettava CSS Nollaa [ Mitkä ovat CSS Nollaa? ], koska ne vähentävät tai joskus poistaa visuaalisia epäjohdonmukaisuuksia, joita esiintyy eri selaimissa. Yksinkertaisesti sanoen CSS palautusmekanismi asettaa tyylejä HTML Element nolla tai nolla-arvoja, mikä ohittaa minkä tahansa selaimen oletusarvoja ne saattavat aiheuttaa. Tämä tarjoaa puhtaalta pöydältä asettaa kyseisten alkuaineiden ominaisuuksista vailla mitään User-Agent oletukset [ CSS2.1 User Agent Style Sheet Defaults ]. Kaikki CSS puitteissa ei ole tehty palautusmekanismi. Jos kirjoitat omistat CSS Nollaa, varoituksen sana on, että jos unohdat palauttaa avaimen omaisuutta, se voisi johtaa rajat selaimet, jotka on hyvin vaikea debugata. Muista, Säilytä kopio reset tyylejä ja pudottaa ne jokaisen uuden projektin luot.
runko, div, dl, dt, dd, ul, ol, li- H1, H2, H3, H4, H5, H6, pre-lomake, fieldset, input, select, textarea, p, blockquote, table, th, td { raja: 0px; margin: 0; padding: 0; }
Valitse oletusasetukset (Baseline Tyylit) ja Elements:
Kun olet asettanut (nolla tai nolla) oletusarvoja tiettyjä ominaisuuksia tiettyjen HTML Elements, on välttämätöntä soveltaa joitakin tyylejä eri joka kerta nämä elementit. Nämä Oletusasetus saattaa vaihdella kohti suunnittelun mukaan tai parhaita käytäntöjä, joita seuraat.
Useimmat CSS puitteet, aina esittelee uusia oletusarvot lisäksi nollaamalla oletusselain tyylejä.
Nämä oletukset ovat vailla User-Agent Defaults (riisuttu pois CSS Reset), nämä ovat johdonmukaisia eri selaimissa.
Muista, Baseline tyylejä käytetään määrittää tyylit, jotka aikovat käyttää suunnittelussa laajuisesti. esim..
html {font-size: 77%; font-family: Arial, sans-serif;} vahva, H1, H2, H3, H4, H5, H6 {font-weight: bold;}
Tiivistelmä Styles yhteisiksi HTML komponentit ja yhteinen luokat:
Suurin hanke koostuu useista sivuja on yhteiset HTML osia käytetään koko sivustossa, esim. Jonkinlainen lomakkeita, ilmoituksia ja virheitä, Custom Popups, valopöytien jne. Koska tällaisia osia käytetään uudelleen eri hankkeiden, olisi hyvä antaa asettaa luokkien liittyvät valmiista tyyleistä näiden komponenttien ja voit säästää paljon aikaa.
Lisäksi määritellä uudelleen tyylimääritykset yhteisen HTML komponentit, voisimme abstrakti tyylejä luokat liittyvät typografia, väri tai jopa asettelua. Itselläni on tapana käytät ... yhteisiä luokkia kuten Clearfix, Font08, FontGrey, AlignL, DisplayB jne.
lomake input {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; height: 26px; color: # 000000; line-height: 30px, font-size: 1.1em;} lomake textarea {border: 0px; background: # ffffff; color: # 000000; font-size: 0.9 EM; line-height: 1.5em, overflow: visible;} . Fbold {font-weight: bold; color: # cccccc;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . Clearfix {selvä: molemmat;} . Jakaja {border-top: 1px solid # 647B06, border-bottom: 1px solid # 9CC00A, korkeus: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: right}. Alignc {text-align: center} . Floatr {float: right;}. Floatl {float: left;}
Korjauksia yhteiset selaimen quirks
Eri selaimet toteuttavat CSS ja tarjoavat vaihtelevia tukitaso CSS vaatimukset. Tuloksena .... "Selaimen koukero", että me kehittäjät jäävät puuttumaan. Varsinkin IE6 kummittelee eniten CSS kooderit joiden määräaika tavata. Hyvä uutinen on, kokemus on tuonut yhteen mahdollisia uudelleenkäytettäviä korjaa näitä asioita (usein ilmaisua kuin CSS Hacks ).
Muista, Pidä nämä hacks / korjaukset kätevä
/ * Seuraavat zoom: 1 sääntö on nimenomaan IE6 + IE7. * / * Html. Clearfix, *: First-child + html. Clearfix { zoom: 1; }
Pidä Haun CSS
Lopuksi. Jos olet inspiroi ja aikovat käyttää yhtä tai useampaa CSS kehysten, Tässäpä on nopea luettelo muutamia suosittuja niistä ....
Muista, CSS kehyksiä ei tarkoita että olet laiska luoda oman ... Se tarkoittaa, että olet fiksu oppia muiden kokemuksista ja virheistä, säästää aikaa ja lisätä tuottavuutta!!
CSS valmistui 10 vuotta olemassaolon tänä vuonna! Ne, jotka ovat olleet jo jonkin aikaa, ansaita leipänsä (tai ei) CSS, niin saatat tietää miten olemme nälkää hyvä valikoima fontteja. Vaikka puute fonttien suunnittelijoiden kaltaisissa CSS Zen Garden on käyttänyt CSS taustakuvia korvata kirjasimet harjoittamisesta tekee joitakin oikeutta niiden mallit. Olemme myös yrittäneet Flash / JavaScript ® hakata saavuttaa suunnittelun tavoitteita. Missään tämä on väärä tapa saada fontit haluamme osaksi Web-malleja, mutta ehdottomasti ei ole halutuin tapa. ja yli vuoden web designer, kuten minä, ovat täysin luottaa kymmenkunta fontit niiden malleja.
Viimeaikainen kehitys web-standardien ja fontin formaatit mahdollistavat tehdä HTML tekstin kirjasimet muuta kuin samaa vanhaa oletus fontteja. Tulee "@ fontface" CSS decleration.
@ Fontface provids ratkaisu linkittää todellista fontin tiedosto ja hakea sitä verkosta. Käyttämällä @ fontface, suunnittelijat voivat käyttää fontteja ilman jäädyttää tekstin taustakuvina. Täytäntöönpano on hyvin suoraviivainen, kuten alla, mutta kaikki hyvät asiat ovat CON osa sitä, kaikki selaimet eivät tue single "fontti". Jos aiot käyttää @ fontface on sivusto vaatii risti selain tukee, niin joudut antamaan lähteitä eri font-tyyppisiä saman.
Käyttämällä @ fontface
@ Font-face { font-family: "CalligraphyFLFRegular"; src: url ('CalligraphyFLF.eot'); src: paikallinen ('CalligraphyFLF), paikallinen (' CalligraphyFLF), url ('CalligraphyFLF.woff)-muodossa ("woff), url (' CalligraphyFLF.ttf)-muodossa (TrueType), url ('CalligraphyFLF . svg # CalligraphyFLF)-muodossa (SVG); } @ Font-face { font-family: "Your kirjasin"; src: url ("fonts / font_filename.eot"); src: paikallinen ("Alternate name"), paikallinen ("Alternatename"), url ("fonts / font_filename.woff") muodossa ("woff"), url ("fonts / font_filename.otf") muodossa ("OpenType"), url ("fonts / font_filename.svg # font_filename") muodossa ("SVG"); } h2 {font-family: "Your kirjasinlajia", Georgia, serif;}
Kuten näette yllä esimerkiksi sisällyttää valitun fontin kirjasinlajin, täytyy linkittää joukko fonttypes samaa kirjasintyyppiä. Siksi ihmiset kutsuvat sitä "Font Kit".
On Font Sarjat että nimenomaisesti sallitaan yhdistäminen kanssa CSS @ font-face omaisuutta sille loppukäyttäjän lisenssi (EULA).
Hyödyllisiä WebFont Resurssit:
Aika ja uudelleen, kun kaikki muut selaimet nähdään käyttäytymään kertonut W3C sääntöjä, IE kierukoiksi teidät kehittämisen henkeä heittämällä kiukuttelu, joka ei näytä olevan korjauksen. Vain tällainen yksi tämän asian IE7.
Ongelma Statement:
Minä ja niin saattaisi monet muita vakavia web-kehittäjät ovat huomanneet yli monta kertaa, että kun pesi kelluu ulkoasun puolesta leijailla yli linkkejä (ankkuri tunnisteet), joka sisältää kontti näyttää siirtää muutaman pikselin oikealle . Olen yrittänyt google ratkaisuvaihtoehtoja, mutta on tuskin löytänyt mitään kohtuullista vastausta, miksi ja milloin se tapahtuu (jotka voivat auttaa estämään tämän ongelman tapahtumasta), joten en ole koskaan löytänyt yksiselitteistä vastausta ongelmaan joko ...
Mahdollinen ratkaisu:
Ei kokemusta, minulla on ilmoituksen 90% prosenttia kertoja eli että tämä ongelma on korjattu lisäämällä zoom kiinteistön CSS määritelmän väärin käyttäytyy kontti ...
# Somediv { zoom: 1; }
jälleen syyt ovat epäselviä ... kokeile ...
Joitakin elementtejä IE on "hasLayout" omaisuus, joka on "tosi" oletuksena. Monet visuaalinen CSS käyttäytymistä, kuten alfa-suodatin toimii vain osan, joka hasLayout. ja {Zoom: 1} näyttää antavan kohde elementtejä hasLayout omaisuutta .... Hyödyllisiä? I dont ajatella niin ...
Zoom ominaisuus on ilmeisesti myös tuetaan Chrome, mutta sen käyttö dint näytä tekevän paljon haittaa minun layout ... kokeilla, jos se toimii sinulle ... jos se ei ole, kirjanmerkki tämä sivu alla "CSS craps"
Eilen, kun asia kohtasin kanssa CSS Nollaa Google Chrome ... ajattelin kaivaa hieman syvemmälle alueelle User Agent Style Sheets ...
Löytyi tämä taulukko oletusarvoja CSS2.1 User Agent Style Sheets ... (niille tiedä mitä "User Agent Style Sheets" on seurata Mikä User Agent Style Sheets (Specification) .
Täydellinen luettelo CSS 2.1 User Agent Style Sheets oletusarvot napsauttamalla tätä
Eilen, kuten kaikki muutkin "Ground Hog Day", olin työskennellyt joitakin CSS / tableless kaavoista. Kaikki oli menossa hyvin IE 7, FF 3 ja Chrome, untill yhtäkkiä, olen nähnyt joitakin YK-ignorable marginaalit nähnyt vain Google Chrome. Vaikka hyvin outoa ja worring, oli joitakin uusia bug / issue että olin törmännyt, oli lopulta noin mauste minun arkipäiväisiin työhön. Sad (mutta kiva) se sai vakiintui muutaman minuutin anturi ...
Periaatteessa se näytti Google Chrome ohitetaan CSS Nollaa (margin: 0px). Se itse asiassa johtui käyttäjä agentti tyylisivu (-webkit-pehmuste-alku: 40px). Eli ratkaisu oli palauttaa tähän tyyliin asettamalla padding: 0 huonosti elementtejä.
Hyvä tapa estää tämän ongelman tapahtuu mitä tahansa elementtiä on käytettävä globaali CSS Rest seuraavasti
* {Margin: 0; padding: 0;}
Mitä User Agent Style Sheets (Specification)?
Seuraava ote on otettu http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , seuraa linkkiä lukea lisää User Agent Style Sheets
CSS 1 lisätään ajatuksen toteamalla, että jokainen User Agent (UA, usein "selaimella" tai "web client) on oletuksena tyylisivu esittää asiakirjat kohtuullisessa - mutta luultavasti arkipäiväisiin - tavalla. CSS 2 sanoo, että mukaiset selaimet on haettava default style sheet (tai käyttäytyvät ikään kuin he) ja user agent oletuksena tyylitiedosto pitäisi esittää elementtejä asiakirjan kieltä tavalla, joka tyydyttää yleistä esittämistapaa odotuksia asiakirjan kieli, CSS 3 on todennäköisesti sama mielessä.
Koska CSS vaatimukset jättävät toteutuksia, käytetäänkö "oikea" tyylisivu oletustilaan tai ei, se ei ole hämmästyttävää, että et löydä default style sheet jokaisen selaimen asennus kansioon. Toisin kuin Microsoftin Internet Explorer ja Opera, esimerkiksi (ja sikäli kuin tiedän), Gecko selaimissa, kuten Firefox ja Netscape Navigator (etsi "html.css") mutta myös Konqueror tekevät melko helppo ymmärtää niiden default tyyli.
Toinen nopea TTY. Tässä on jotain yksinkertaista ja mukava käyttää POWER CSS ... mutta oli vaikea concieve (ja se varmasti ollut minä), aluksi. Lisääminen Dropshadow, saattaa olla peice kakkua monille meistä, käyttäen joitakin kuvankäsittelyn työkalut, kuten Photoshop ANF Ilotulitus jne.
Syy miksi olen valinnut varjon CSS on, että yleensä luotaessa sivujen suunnittelu / html hakemuksen, vaatimukset pitää iteroimalla. Tällä tarkoitan sitä, In olemassa sivusto, jossa paljon kuvia, kuten ne näyttävät freinds luetteloa tai kuvagalleria, on vaikea käsitellä uudelleen koko kuorma kuvia, jotka oli jo purettu lisätä tai poistaa varjoja, sillä asia.
Joten jos olet tehnyt hieman eteenpäin ajattelua luotaessa HTMLS lisätä nämä ylimääräiset osastojen tai yleensä tilanne on se, että sinulla on Loop Logic tuottaa näitä kuvakkeita / miniatyyrit XSL, PHP. JAVA tai muu ohjelmointi / skriptikieli, voit lisätä sen milloin tahansa, niin on vain kysymys näyttää ja piilottaa nämä varjot käyttämällä CSS-ominaisuutta display, kohti asiakkaiden alati muuttuviin tarpeisiin ... En havn't tehnyt tällaista eteenpäin ajattelu ennen tätä ... mutta ahev jo nyt!
Alla olevassa esimerkissä, alkuperäinen kuva on varjo vapaa ja dropshadows sovelletaan tarpeen mukaan! Lisäksi olen mennyt vähän ylimääräistä, käyttämällä temppuja minun aiemmin Tut (Well! nämä luultavasti on lyhin erilaisia Tutorials, joten se on perusteltua vain kutsuen heitä "Tut": n) noin CSS Clip Property for leveillä vain
Miksi haluan ymmärtää tämän??? ... Humm!!
Useimmat CSS kirjoittajat samaa mieltä siitä, että CSS Clip omaisuus on luultavasti yksi kaikkein un käytettyjä CSS-ominaisuuksia. Se oli niin totta minullekin ja oli erittäin iloinen jättää huomiotta sitä, kunnes aloitin muokkaamalla MooTools KAKSI Knob (Pin) Slider Komponentti (Alueen Indicator) .
Oli hyvä ehdotus yhdestä komponentin käyttäjät voivat muokata Slider Component käyttäen leikattu taka kuvia (vasten muuttuja leveys jako) osoittamaan liukusäädintä alue. Näin tuli minun aikani tulla hauska, mutta un-charter (minulle tietysti) vedet CSS Clip omaisuutta.
No! kuinka vaikeaa voi olla? Ei paljon ollenkaan ... Kyllä ja ei. Syntaksi käyttää CSS Clip omaisuus on melko pystyssä, mutta merkitys / usuage on vähän croocked. Kun muisti kuin minun, Everytime I istua muokata minun Slider Script ... Minulla tokeep viittaa takaisin käyttöön tämän CLIP omaisuuden muistuttaa itseäni logiikkaa, että olen luonut minun script .... Näin! ajattelin kynä alas ja toivoa muistaa se tulevaisuudessa (ja myös Niille, jotka näyttävät boggled jota CSS Clip Property)
Mitä CSS Clip tekee?
Clip on osa visuaalisia tehosteita moduulin CSS 2.1. Yksinkertaisesti sanottuna, sen tehtävänä on asettaa näkyvän ikkunan päälle esine, joka on leikattu, joten syväyspolku kuvia ja luoda pikkukuvia ilman luoda uusia tiedostoja (Olen jo laittaa tämän ominaisuuden käyttää paremmin Slider Component 
)
Käyttämällä CSS Clip ominaisuuden avulla voit luoda rajaavan käyttäen rect muodon. Kuten monet muutkin CSS-ominaisuudet (kuten margin, padding jne.) käyttäen rect vaatii neljä koordinaatit Top, Oikea, Ala, Vasen (HÄIRIÖ). Croocked luonne ominaisuus heijastaa kun otat tarkemmin miten clip laskee rajaavan alueen käyttäen nämä neljä koordinaatit (lähettää aivot heittää hetkeksi). Nyt hämmentää teitä pohja alkaa ylhäältä ja oikealla alkaa vasemmalta. . Näet mitä sanoin? .... Siksi tämä viesti ...
Tämä pieni sekaannus voi helposti kadota, tämä visuaalinen kuvaus CSS Clip / rect omaisuuden alla!!
Tehtävä olemme alkaneet on leikata seuraavat Pienoiskuva kuvan squarer näköinen kuva (ja myös laajakulma kuva)
| |  |
| Alkuperäinen Thumbnal / Image | Clip vaatimukset Sqaure Thumbmail |
Ennen meidän piti käsitellä CSS luomme sivun asetteluja kohdistamalla joitakin sisällön sisällä taulukon solun tuntui vain lastenleikkiä. Aseta vain "align" tai "valign" ominaisuuden taulukon on linjaus, valinnan, pala kakkua!
CSS ulkoasuja, vaikka meillä on "vertical-align" omaisuutta elementtejä, se ei näytä olevan yhtä yksinkertaista kuin "align" tai "valign" ominaisuuksia. Ollakseen specifiic "vertical-align" ei tunnu koskaan ratkaista mitään ongelmia, varsinkin jos ne kirjoittavat pala rajat selaimen CSS.
Ilman käyttää HTML taulukot, ongelma keskitys esineen, olipa se sitten kuva tai jonkin tekstin sisältävä alue on todennäköisesti ollut jokaisessa UI / CSS kehittäjät painajainen jossain vaiheessa. Tämän ongelman lisäksi ekstrapoloi huolet yhdenmukaistaa, jos kohde on keskellä on dynaaminen luonteeltaan, eli kun sen korkeus on vaihteleva (tuntematon korkeus).
Vaikka ei tiedetä suoraviivaista ratkaisua, joka toimisi kaikissa eri selaimilla meidän on käsiteltävä, ratkaisu, olen yrittänyt päästä ei tunnu töihin harvat selaimet, joita olen kokeillut sitä (IE6, IE 7 , FF).
RATKAISU:
Vuonna selaimet, kuten Mozilla, Opera ja Safari, outo käyttäytyä "vertical-align" omaisuus saadaan järkiinsä, yksinkertaisesti asettamalla "näyttö"-ominaisuuden sisältävän divisioonan "table-cell" (display: table-cell) .
Ongelmana on edelleen IE perheen selaimissa, joka vielä ei näytä ymmärtävän, mitä on "table-cell"-ominaisuus, ja tietämätön kuin ne ovat, he vain välitä siitä. Ratkaisu alla, mutta yksinkertainen, mainoksia muutama DOM-elementtejä HTML saada asioita tapahtumaan.
CSS ja HTML näyttää tältä
.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/> Views: 3456 </ div>
</ Div>
</ Div>
Tulos näyttää tältä: -
Katso esittely tästä | Download Source Files (Downloaded 452 kertaa)
TOP Kohdista 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/> Views: 1234 </ div>
</ Div>
</ Div>
Tulos näyttää tältä: -
BOTTOM Kohdista 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/> Views: 1234 </ div>
</ Div>
</ Div>
Tulos näyttää tältä: -
Katso esittely tästä | Lataa tästä
Tuntuu aikojen, kun yritin löytää järkevä ratkaisu linjaus ongelmaan. Mutta nyt tähän ratkaisuun, tunnen pienin rauhassa.
Kun toivoa, että jonain päivänä
Lataa CSS ja HTML edellä ratkaisulta (Downloaded 452 kertaa) .. ja ymmärrettävyyden, CSS ei ole optimoitu
PS: Ja muuten, ne ovat pikkukuvat joitakin kuvia olen napsauttanut ...
CSS Non-IE: Sen ei uutisia CSS kehittäjät, CSS Child valitsimet, kuten alla olevassa esimerkissä, ei näytä toimivan IE.
esim. div> span {jotkut css}, joka tarkoittaa "Kun span elementti on lapsi (eikä lapsenlapsi tai suuren grand lapsi jne.) jako elementin".
Mutta me käytetään tätä CON eduksemme. Historiallisesti lapsi valitsin on käytetty piilottaa CSS komentoja IE. Yksinkertaisesti asettamalla html>body eteen CSS komennon IE jättää se:
html>body .foo { CSS commands go here ;}
Tämä toimii, koska <body> on aina lapsi <html> - voi tietenkään koskaan olla lapsenlapsi tai lapsenlapsen lapsi on <html> .
Nyt IE 7 ymmärtää lapsen valitsin, sinun täytyy lisätä tyhjän kommentin tagi heti suurempi kuin-merkki. IE 7 ei silloin ymmärrä tätä valitsin (kuka tietää miksi!?) Ja näin ollen täysin ohittaa tämän CSS komennon:
html> /**/ body .foo { CSS commands go here ;}
Jos ei ole jo nähnyt näitä ennen, on lukea läpi seuraavien samoin
