Kieku taqra dan f'xi blog ... ħsibt li kien sabiħ li katalogu din għall ref futur .... tista 'wkoll tkun kwistjoni intervista importanti li inti mitlub xi jum ....
Ikteb snippet ta 'CSS li se display paragrafu bil-blu fil-browsers anzjani, aħmar fil-browsers aktar ġodda, aħdar u iswed IE6 fil IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Re-Ċikliżmu huwa Buzzword u In Web Development dan ifisser xejn differenti. Hija tikkonserva l-enerġija, f'termini ta 'sforz!
Matul is-snin tal-kitba CSS u l-ħolqien HTML minn disinji, I segwita prattiċi ftit aħjar, fl-insegwiment ta 'ffrankar ta' ħin u enerġija li dak li aħna komunement terminu bħala "Re-Invenzjoni-rota". Darba wara, I told myself, I li għandhom joħolqu mudelli ftit, xi standard jistgħu jerġgħu jintużaw CSS li nixtieq użu barra mill-kaxxa fil-ħidma futura tiegħi. Għalkemm mhux kompletament iżda I ma rnexxilhomx jikseb xi wħud mill-għanijiet.
Fl-avvanz, Re-Użu ta 'CSS, kelli ħarsa lejn l-oqfsa CSS ftit li huma komunement disponibbli lilna u ddeċieda li jqiegħdhom għall-użu, kif dawn huma ippruvati u ttestjati u maħluqa mill-iżviluppaturi b'esperjenza ħafna, minn myself. Aktar importanti minn "EVITAT ri-invenzjoni".
Għalkemm l-għarfien komuni għall-veterani, I ppruvaw pinna xi proġetti prinċipali kunċetti / aħjar l-prattiċi / ħsibijiet li marret lejn il-ħolqien dawn l-oqfsa, biex jagħmlu RE-ĊILKLIKU ta 'CSS possibbli. Nittama li dan se jgħin xi iżviluppaturi CSS li huma biss dwar u reċentement mbarkat-bandwagon CSS!
Użu Konvenzjonijiet Naming
Dan għandu jkun l-aktar fattur importanti fit-teħid-CSS / HTML jistgħu jerġgħu jintużaw. Tingħata ismijiet konsistenti ma 'elementi paġna jippermetti użu mill-ġdid ta' komponenti paġna u stili tagħhom bi ftit jew modifiki. F'konformità ma 'dan l-argument, Anki HTML5, f'bidla bidla kbira fuq predeċessuri tiegħu, huwa li jiġu introdotti xi viz tikketti strutturali. <article>, <section>, <header>, <aside>, u <nav> [ X'se HTML5 ġġib? ]. Anke ma HTML 4 (jew inqas), huwa aħjar biex insemmu sezzjonijiet standard ta 'paġna tiegħek consistanly bħal fl-eżempju hawn taħt sempliċi ...
Ftakar, paġni Ħafna dwar proġett tiegħek, jispiċċaw wara l-elementi ewlenin istess strutturali. Identifika dawn l-elementi komuni paġna ewlenin ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Irrisettja Stili Default (jreġġa CSS): Jekk inti tuża qafas jew tikteb tiegħek, għandek tipprovdi jreġġa CSS [ X'inhuma jreġġa CSS? ], peress li dawn inaqqsu jew jeliminaw xi kultant inkonsistenzi viżwali li jseħħu bejn browsers differenti. Fi kliem sempliċi il-Mekkaniżmu Irrisettja CSS tistabbilixxi l-istili ta 'Element HTML biex valuri żero jew nulli, b'mod li jissuperaw xi valuri awtomatiċi browser jistgħu joħloq. Dan jipprovdi rekord nadif li jiġu stabbiliti l-proprjetajiet ta 'dawn vojt elementi ta' kwalunkwe Defaults User-aġent [ Defaults Utent CSS2.1 aġent Sheet Style ]. L-oqfsa CSS ma jkollhom mekkaniżmu ta 'reset. Jekk qed tikteb int stess jreġġa CSS, kelma ta 'kawtela hija li jekk jiġri li tinsa għal reset-proprjetà ewlenin, Jista' jwassal biex jaqsmu l-browser kwistjonijiet, li huma diffiċli ħafna biex debug. Ftakar, Żomm kopja ta 'l-istili reset u qatra minnhom f'kull proġett ġdid inti toħloq.
ġisem, div, dl, dt, dd, UL, ol, LI, H1, H2, H3, H4, H5, H6, qabel, il-forma, fieldset, input, tagħżel, textarea, p, blockquote, tabella, th, td { fruntiera: 0px; marġni: 0; ikkuttunar: 0; }
Defaults Irranġa (stili linja bażi) sa Elementi:
Wara li tkun stabbilita (għal żero jew null) l-valuri default ta 'ċerti attributi ta' Elementi HTML ċerti Huwa meħtieġ li tapplika xi stili madwar kull każ ta 'dawn l-elementi. Dawn default jista 'jvarja bħala per-disinn jew skond l-aħjar prattiki inti ssegwi.
Oqfsa Ħafna CSS, dejjem tintroduċi xi nuqqasijiet ġodda, flimkien ma 'resetting stili browser default.
Dawn nuqqasijiet li vojt ta 'l-Defaults User-aġent (imqaxxar mill-bogħod mill-Irrisettja CSS), dawn ser ikunu konsistenti madwar browsers.
Ftakar, stili linja bażi jintużaw sabiex jitfasslu stili li ser jintużaw disinn kollha. eż.
html {font-daqs: 77%; font-familja: Arial, sans Serif-;} qawwija, H1, H2, H3, H4, H5, H6 {font-piż: bold;}
Stili Abstract għall Komponenti HTML Komuni u tal-Kategoriji Komuni:
Aktar proġett jikkonsisti bosta paġni se jkollhom elementi HTML komuni użati madwar is-sit, għall eż Xi tip ta 'forom, twissijiet u żbalji, popups Custom, lightboxes eċċ Peress dawk il-komponenti huma użati mill-ġdid fost il-proġetti, Se jkun utili li jiġi provvdut sett ta 'klassijiet assoċjati ma' stili predefiniti għall dawn il-komponenti u inti tista 'tiffranka yourself ħafna ħin.
Barra minn definizzjoni definizzjonijiet li jistgħu jerġgħu jintużaw stili għall-Komponenti HTML komuni, nistgħu klassijiet astratti stili li jappartjenu għal, tipografija kulur jew saħansitra tqassim. I myself tendenza li tuża ... klassijiet komuni bħal Clearfix, Font08, FontGrey, AlignL, DisplayB eċċ
kontribut forma {fruntiera: 0px; isfond: # ffffff; ikkuttunar: 0px 10px; _padding: 0px 0px; għoli: 26px; kulur: # 000000; linja tal-għoli: 30px; font-daqs: 1.1em;} forma textarea {fruntiera: 0px; isfond: # ffffff; kulur: # 000000; font-daqs: .9 Membru; linja tal-għoli: 1.5em; overflow: viżibbli;} . Fbold {font-piż: bold; kulur: # cccccc;} . Fgrey {kulur: # 666666;} . Flightgrey {kulur: # bbbbbb;} . Clearfix {ċar: it-tnejn;} . Diviżur {fruntiera ta 'fuq: 1px solida # 647B06; fruntiera tal-qiegħ: 1px solidu # 9CC00A; għoli: 0px;} . Displayb {display: block;}. Displayn {display: xejn;} . Alignr {test tallinja: id-dritt}. Alignc {test tallinja: ċentru} . Floatr {float: id-dritt;}. Floatl {float: xellug;}
Jiffissa għall quirks browser komuni
Browsers differenti jimplimentaw kodiċi CSS u jipprovdu livell differenti ta 'appoġġ għall-ispeċifikazzjonijiet CSS. Ir-riżultat ta 'dan .... "Quirks Browser", li aħna-iżviluppaturi jitħallew sabiex tindirizza. Speċjalment, IE6 haunts kodifikaturi aktar CSS ma 'terminu perentorju biex jintlaħqu. L-aħbar tajba hija esperjenza miġjuba flimkien jiffissa jintużaw mill-ġdid possibbli biex dawn il-kwistjonijiet (Spiss msejħa bħala Hacks CSS ).
Ftakar, Żomm dawn hacks / jiffissa handy
/ * Il-zoom ġej: 1 regola hija speċifikament għall IE6 + IE7. * / * Html. Clearfix, *:. L-ewwel wild + html clearfix { zoom: 1; }
Żomm Raffinar CSS tiegħek
Fl-aħħarnett. Jekk inti huma ispirati u l-intenzjoni li juża waħda jew aktar mill-oqfsa CSS, Heres hija lista ta 'malajr ta' ftit dawk popolari ftit ....
Ftakar, bl-użu oqfsa CSS ma jimplikax li inti għażżien biex joħolqu waħda tal tiegħek ... Dan ifisser li inti intelliġenti li jitgħallmu minn xulxin esperjenza u żbalji, jiffranka ħin u tiżdied il-produttività!!
CSS kompletati 10 snin eżistenza din is-sena! Dawk li ġew madwar għal xi ftit, jaqla ħobż tagħhom (jew le) bl-użu CSS, allura inti tista 'taf kif ilna starving għal għażla tajba ta' fonts. Anki man-nuqqas ta 'fonts disinjaturi bħal dawk fil CSS Garden Zen għamlu użu ta 'stampi isfond CSS biex jissostitwixxu fonts fl-insegwiment ta' kif isir xi ġustizzja disinni tagħhom. Għandna wkoll ippruvaw Flash / JavaScript hacks ® biex jintlaħqu l-miri tad-disinn tagħna. Bl-ebda mod dan huwa mod żbaljat biex jiksbu l-fonts aħna xewqa fis-disinji web tagħna, iżda ċert, mhuwiex l-aktar mod mixtieq. u aktar web designer snin, bħali, kompletament invokati għaxar jew hekk fonts għad-disinji tagħhom.
Żviluppi riċenti fl-istandards tal-web u formati font jagħmluha possibbli li l-test HTML tipa oħra għajr il-fonts istess default qodma. Jasal fil-"@ fontface" decleration CSS.
@ Fontface provids soluzzjoni biex tagħmel link mas-font fajl attwali u jerġgħu jieħdu lura mill-web. Bl-użu @ fontface, disinjaturi jistgħu jużaw fonts mingħajr ma jkollhom friża-test kif immaġini isfond. L-implimentazzjoni hija ferm ħafif, kif muri hawn taħt iżda bħala l-affarijiet tajba jkollhom parti CON lilha, mhux kollha browsers appoġġ għal wieħed "font tip". Jekk inti qed tippjana li tuża fontface @ fis-sit ma jeħtieġu l-appoġġ browser transkonfinali, allura inti se jkollhom jipprovdu sorsi għal diversi font-tipi ta 'l-istess.
Bl-użu @ fontface
@ Font-wiċċ { font-familja: "CalligraphyFLFRegular"; src: url ("CalligraphyFLF.eot"); src: lokali ("CalligraphyFLF"), lokali ("CalligraphyFLF"), il-format url ("CalligraphyFLF.woff") ("woff"), url ("CalligraphyFLF.ttf") il-format ("TrueType"), url ("CalligraphyFLF . SVG # CalligraphyFLF ") il-format (" SVG "); } @ Font-wiċċ { font-familja: "tipa" Your; src: url ("fonts / font_filename.eot"); src: lokali ("isem alternattiv"), lokali ("Alternatename"), ("fonts / font_filename.woff") url format ("woff"), ("fonts / font_filename.otf") url format ("opentype"), ("fonts / font_filename.svg # font_filename") url format ("SVG"); } h2 {font-familja: "tipa" Your, il-Ġorġja, Serif;}
Kif tistgħu taraw mill-eżempju hawn fuq, biex tinkludi l-tipa font magħżul, wieħed għandu link għal sett ta 'fonttypes għall-istess tipa. Għalhekk in-nies jirreferu għaliha bħala "Kitt Font".
Hemm Kitts Font disponibbli li espliċitament jippermetti li tgħaqqad ma 'CSS @ font-wiċċ proprjetà lilha taħt il-Ftehim Tmiem License Utenti (EULA).
Riżorsi utli WebFont:
Ħin u aktar mill-ġdid, Meta l-browsers oħra jidhru li jaġixxu kif qallek mir-regoli W3C, spirali IE inti out ta 'l-ispirtu iżvilupp billi jitfg tantrum, li ma jidhirx li għandhom jiffissaw. Biss tali wieħed huwa din il-kwistjoni IE7.
Dikjarazzjoni Problema:
I u għalhekk jista 'ħafna mill-iżviluppaturi web oħra serji nnotajt aktar minn kemm il-darba, li l meta jkun hemm nested sufruni fit-tqassim, fuq imbagħad jerġgħu fuq xi links (tags ankra), il-kontenitur li jkun fih jidher li ċċaqlaq pixels ftit lejn il-lemin . I ppruvaw soluzzjonijiet google għal din il-kwistjoni, iżda kważi ma sabet l-ebda tweġiba raġonevoli li għaliex u meta dan iseħħ (li jistgħu jgħinu biex jevitaw din il-kwistjoni mill jiġri), b'hekk jien qatt ma sabu soluzzjoni ċara għall-problema jew ...
Possibbli Soluzzjoni:
Minn esperjenza, għandi fil-mija avviż 90% tal-ie drabi, li din il-kwistjoni huwa ffissat billi jiżdied proprjetà zoom fid-definizzjoni CSS tal-kontenitur ħażin iġib ruħu ...
# {Somediv zoom: 1; }
mill-ġdid ir-raġunijiet huma ambigwi ... jippruvaw dan ...
Xi elementi fl-IE għandhom "hasLayout" proprjetà, li huwa "vera" fil-kontumaċja. Ħafna imgieba viżwali CSS, per eżempju, 1 filtru alfa biss xogħlijiet fuq element li hasLayout. u l-{Zoom: 1} tidher li tagħti l-elementi fil-mira l-proprjetà hasLayout .... Utli? I dont think so ...
Il-proprjetà zoom huwa wkoll jidher li appoġġjat mill Chrome, iżda bis-saħħa l-użu tiegħu jidher li jagħmlu effett negattiv ħafna fuq it-tqassim tiegħi ... jippruvaw dan, Jekk din taħdem għalik ... jekk ma jiġrix dan, Immarka din il-paġna taħt 'Craps CSS "
Ilbieraħ, wara l-ħruġ I jiltaqgħu ma 'l-jreġġa CSS fil-Google Chrome ... ħsibt ta' tħaffir daqsxejn aktar profonda fil-qasam tal Sheets Utenti Style aġent ...
Misjuba din it-tabella fuq valuri awtomatiċi ta 'CSS2.1 Sheets Utent Style aġent ... (għal dawk konxji ta' liema "Folji User Style aġent" hu li ssegwi X'inhu Folji User aġent Style (speċifikazzjoni) .
Għal-lista kompleta ta 'CSS nuqqasijiet Utent 2.1 aġent Folji Style ikklikkja hawn
Ilbieraħ, bħal kull oħra "Jum Hog Ground", I kien qed jaħdem fuq xi taqsim CSS / tableless. Kollha kienet tmur ferm fl-IE 7, FF 3 u Chrome, untill f'daqqa waħda, Rajt xi marġini un ignorable dehru biss fil-Google Chrome. Għalkemm ħafna stramba u worring, Kien xi kwistjoni ġdida bug / I li kienet waslet madwar in, kien hemm finalment xi ħwawar fil-ħidma mundane tiegħi. Sad (iżda sympathique) li ltqajna ffissat fi ftit minuti ta 'l-sonda ...
Bażikament, Li dehru qishom Google Chrome injorati jreġġa CSS tiegħi (marġni: 0px). Hija fil-fatt kien ikkawżat mill-stylesheet aġent utent (-WebKit-ikkuttunar-bidu: 40px). Allura s-soluzzjoni kienet li reset dan l-istil billi ikkuttunar: 0-elementi misbehaving.
Mod tajjeb biex jipprevjenu din il-problema iseħħ għal kwalunkwe element huwa użu Bqija CSS globali kif ġej
* {Marġini: 0; ikkuttunar: 0;}
X'inhu Folji User aġent Style (speċifikazzjoni)?
Il-silta li ġejja hija meħuda mill http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , rabta segwitu biex taqra aktar dwar Folji User Style aġent
CSS 1 jintroduċi l-idea billi tiddikjara li kull aġent Utenti (UA, spiss "web browser" jew "klijent web") se jkollhom stil sheet nuqqas li jippreżenta dokumenti raġonevoli - iżda forsi mundane - mod. CSS 2 jgħid li l-aġenti ta 'utenti li jikkonformaw għandu japplika folja stil default (jew jaġixxu bħala jekk dawn ma) u li folja aġent utent stil default għandu jippreżenta l-elementi tal-lingwa dokument b'modi li jissodisfaw l-aspettattivi preżentazzjoni ġenerali għall-lingwa dokument; CSS 3 x'aktarx li jkun tal-moħħ istess.
Ladarba l-ispeċifikazzjonijiet CSS tħalli f'idejn l-implimentazzjonijiet jekk jużawx "reali" stil folja għall-wiri nuqqas jew le, mhuwiex sorprendenti li inti ma ssibx folja stil default fil-folder installazzjoni f'kull browser. B'differenza Microsoft Internet Explorer kif ukoll Opera, per eżempju (u safejn naf), browsers Gecko bħal Firefox u Netscape Navigator (tfittex għal "html.css") iżda wkoll Konqueror jagħmilha pjuttost sempliċi li tifhem grafika nuqqas tagħhom.
Ieħor quick Tut. Hawnhekk hija xi ħaġa sempliċi u sbieħ bl-użu POWER ta 'CSS ... iżda kien concieve diffiċli (u żgur ma kienx me) li tibda bil. Żieda Dropshadow, jista 'jkun peice kejk għal ħafna minna, bl-użu xi image editing għodod simili Photoshop ANF Fireworks eċċ
Ir-raġuni għaliex, I għażel dell qatra jużaw CSS huwa li, normalment waqt ħolqien ta 'disinn paġna / html ta' applikazzjoni, il-ħtiġiet iżommu mtennija. What I medja hija, Fil sit web eżistenti bi stampi ħafna, bħal dawk wiri freinds lista jew image gallery, se jkun diffiċli li mill-ġdid il-tagħbija kollha ta 'immaġini li kienu diġà maħtuta biex iżżid jew tneħħi l-dellijiet, għal dik kwistjoni.
Allura Jekk inti għamlu ħsieb quddiem ftit filwaqt li toħloq il-HTMLS biex iżżid dawn it-taqsimiet żejda jew normalment is-sitwazzjoni hija li inti għandek Loġika Loop jiġġeneraw dawn ikoni / thumbnails fil XSL, PHP. JAVA jew kwalunkwe programmar / scripting lingwa, tista 'żżid ghaċ, allura huwa biss il-kwistjoni ta' ispettaklu u ħabi dawn dellijiet tuża 'l-proprjetà Display CSS, skond il-klijenti dejjem jinbidlu rekwiżiti ... I havn't jsir dan it-tip ta' quddiem ħsieb qabel dan ... iżda ahev beda issa!
Fl-eżempju hawn taħt, l-immaġini oriġinali huwa dell ħielsa u l-dropshadows huma applikati kif meħtieġ! WKOLL, I marru ftit extra, billi tuża l-tricks tal Tut preċedenti tiegħi (Well! dawn probabbilment huma varjetà iqsar ta 'tutorials, u għalhekk huwa ġġustifikat biss titlob minnhom "Tut" "i) dwar Bl-użu tal-Proprjetà Clip CSS għall juru off biss
Għaliex irrid biex jifhmu dan? Humm ...!!
Ħafna mill kittieba CSS jaqblu li l-proprjetà Clip CSS huwa probabilment waħda mill-proprjetajiet aktar CSS un użati. Kien veru għalija wisq u kienet l-aktar kuntenti li negliġenza tiegħu, sakemm bdejt timmodifika l- MooTools TNEJN pum (Pin) slider Komponent (bil Indikatur Medda) .
Kien hemm suġġeriment tajjeb minn wieħed mill-utenti komponenti li jimmodifika l-Komponent slider jużaw immaġini maqtugħ backgroud (kontra diviżjoni wisa varjabbli) li jindikaw il-medda slider. Għalhekk wasal iż-żmien tiegħi li jidħlu fil-gost imma un mikrija (għalija Naturalment) ilmijiet tal-proprjetà Clip CSS.
Ukoll! kemm hu diffiċli li jista 'jkun? Mhux ħafna fil-livelli kollha ... IVA u NO. Is-sintassi li jużaw il-proprjetà Clip CSS huwa pjuttost wieqaf iżda it-tifsira / usuage huwa daqsxejn croocked. Bil-memorja bħal mini, everytime I sit biex tinħadem mill-ġdid fuq Script slider tiegħi ... Għandi tokeep jirreferu lura għall-użu ta 'din il-proprjetà CLIP, biex ifakkru lili nnifsi l-loġika li I ħolqu b'kitba tiegħi .... Għalhekk! maħsub li pinna l-isfel, bil-tama li tiftakar il-futur (u wkoll għall-benefiċċju ta 'dawk li jidhru boggled mill-Proprjetà Clip CSS)
X'jagħmel Clip CSS do?
Clip hija parti mill-modulu effetti viżwali ta 'CSS 2.1. Fi kliem sempliċi, xogħol tagħha huwa li jqiegħed tieqa viżibbli fuq quċċata ta 'oġġett li qed jiġi maqtugħ, b'hekk ikklippjar immaġini u l-ħolqien thumbnails mingħajr ma jinħolqu fajls addizzjonali (diġà tpoġġi din il-karatteristika li użu aħjar fl-Komponent Slider 
)
Uża l-proprjetà Clip CSS, inti tista 'toħloq qtugħ bl-użu forma indiretti. Bħal Properties ħafna CSS oħra (bħall eċċ marġini ikkuttunar,), bl-użu indiretti teħtieġ erba 'koordinati Fuq, Dritt, qiegħ, xellug (TRBL). In-natura croocked ta din il-proprjetà jirrifletti meta inti tagħti ħarsa aktar mill-qrib lejn kif clip tikkalkula r-reġjun qtugħ, użu ta 'dawn koordinati erba (tibgħat moħħ fi toss għal waqt). Issa li jħawdu inti-qiegħ jibda mill-quċċata, u d-dritt tibda mill-xellug. . Inti tara dak I said? .... Għalhekk din il-kariga ...
Din il-konfużjoni ftit tista 'faċilment jisparixxu, ma din l-ispjegazzjoni viżwali tal-CSS Clip / indiretti proprjetà hawn taħt!!
Il-kompitu aħna bdejna huwa li clip-immaġni Thumbnail ġej fi xbieha squarer tfittex (u wkoll xbieha ta 'angolu wiesa)
| |  |
| Thumbnal Oriġinali / Image | Clip Rekwiżiti għall sqaure Thumbmail |
Qabel kellna biex jittrattaw CSS biex joħolqu layouts paġna tagħna, allinjament xi kontenut ġewwa ċelloli tabella deher play biss tat-tfal. Sempliċement jistabbilixxu l-"jallinjaw" jew "valign" proprjetà tat-tabella li jkollhom l-allinjament ta 'l-għażla tiegħek, biċċa kejk!
Bil taqsim CSS, għalkemm għandna "vertikali 'allinjament" proprjetà għall-elementi, ma jidhirx li tkun sempliċi daqs l-"jallinjaw" jew "valign" Properties. Biex wieħed ikun aktar specifiic l-"vertikali 'allinjament" qatt ma jidher li issolvi kwalunkwe problemi tiegħek, speċjalment jekk huma jiktbu biċċa ta' cross-browser CSS.
Mingħajr l-użu tat-Tabelli HTML, IL-PROBLEMA ta 'tiffoka fuq oġġett, kemm jekk tkun ta' immaġni jew xi test fi diviżjoni fihom, x'aktarx ilha kull lejl iżviluppaturi UI / CSS f'xi punt. Din il-problema aktar testrapola inkwiet tiegħek ta 'allinjament, jekk l-oġġett li jkun iffukat huwa dinamiku fin-natura, jiġifieri meta l-għoli tagħha hija varjabbli (tul mhux magħrufa).
Għalkemm m'hemm l-ebda soluzzjoni magħruf ħafif li tkun taħdem fuq il-firxa ta 'browsers għandna biex jittrattaw, is-soluzzjoni li jien ippruvajt li jaslu ma jidhirx li jaħdmu fil-browsers ftit li jien ippruvati f' (IE6, IE 7 , FF).
SOLUZZJONI:
Fil-browsers bħall Mozilla, Opera u Safari, Il-stramba iġib ruħu "vertikali 'allinjament" proprjetà jistgħu jinġiebu sensi tagħha, sempliċement billi jiġu ffissati l-"wirja" proprjetà tad-diviżjoni li fiha li "mejda taċ-ċelluli" (wirja: tabella taċ-ċelluli) .
Il-problema xorta tibqa 'familja IE ta' browsers, li, iżda ma jidhirx li jifhmu dak li mal-"tabella ta 'ċellula" proprjetà u injorant kif inhuma, huma biss jinjoraha. Is-soluzzjoni mogħtija hawn taħt, għalkemm sempliċi, ads ftit elementi aktar DOM għall HTML tiegħek biex tagħmel affarijiet jiġri.
Il-HTML u CSS tidher bħal dan
.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/> opinjonijiet: 3456 </ div>
</ Div>
</ Div>
Ir-riżultat tidher bħal dan: -
tara l-demo hawn | Il Fajls Download Sors (ddawnlowdjati 452 darbiet)
TOP Tallinja 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/> opinjonijiet: 1234 </ div>
</ Div>
</ Div>
Ir-riżultat tidher bħal dan: -
QIEGĦ Tallinja 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/> opinjonijiet: 1234 </ div>
</ Div>
</ Div>
Ir-riżultat tidher bħal dan: -
tara l-demo hawn | Download hawn
Tidher bħal etajiet, peress li jien kien qed jipprova jsib soluzzjoni raġonevoli biex din il-problema allinjament. Imma issa ma din is-soluzzjoni, inħoss fil-paċi ftit.
Bil-tama li someday
Niżżel il-HTML u CSS tas-soluzzjoni hawn fuq hawn (ddawnlowdjati 452 darbiet) .. għal ftehim, il-CSS ma jkunx ġie ottimizzat
PS: U mill-mod, dawn huma thumbnails ta 'xi ritratti nkun għafast ...
CSS għall mhux IE Browsers: Tagħha ebda aħbar lill-iżviluppaturi CSS li, CSS seletturi Tfal bħall-eżempju hawn taħt, ma jidhirx li jaħdmu fl-IE.
eż div> medda {xi css}, li tfisser "meta element medda huwa tifel (u MHUX neputi jew it-tifel/tifla grand kbira eċċ) ta 'element diviżjoni".
Iżda aħna użat dan CON għall-vantaġġ tagħna. Storikament, is-selettur minuri ġew użati biex jaħbu jikkmanda CSS minn IE. Sempliċiment billi tqegħid html>body quddiem kull IE kmand CSS se jinjora dan:
html>body .foo { CSS commands go here ;}
Dan jaħdem minħabba <body> huwa dejjem wild ta <html> - jista naturalment qatt ma tkun neputi jew kbira-neputi ta ' <html> .
Issa li IE 7 jifhem is-selettur tfal, trid iddaħħal tag kumment vojt fil direttament wara l-akbar minn sinjal IE 7 mbagħad ma jifhmu dan selettur (li jaf għaliex!?) U għalhekk se tinjora totalment dan il-kmand CSS.:
html> /**/ body .foo { CSS commands go here ;}
Jekk ma jkunux diġà raw dawn qabel, għandhom jaqra permezz li ġej kif ukoll
