Exprimarea IT

Ca de obicei, una din cele mai multe probleme ciudate cu IE şi aceasta trebuie să rândurile în TOP 10 al quirks IE.

Formularea problemei (Aceasta a fost problema mea, poate ai abateri similare):
Am multe DIV este, în pagina cu clasa "Sector", care nu este nimic, dar titlul de o secţiune de pe pagina. Deci, am un stil arata ca acest

Sector {font-size: 18px; fundal: # cfcfcf; padding: 5px;}.

Div este un bar de culoare gri deschis, cu un text negru. Ce se întâmplă în IE este unele dintre aceste anteturi secţiune sunt afişate ok, dar unele sunt invizibile, până când, în care se derulează pagină sau faceţi clic pe ceva pe pagina, etc Uneori, ele tind să dispară atunci când faceţi clic pe "Alt" cheie atunci când pagina de jos sau derula cu bara de defilare. Uneori ele par să reapară atunci când reîncărcaţi (F5), pagina. Am scurt un DIV perfect simplu, cu un stil simplu, se comportă BAD.
Ce ar putea cauza un astfel de comportament haotic? Ei bine! Sincer, nici o idee!

POSIBILE SOLUŢIE:
Din nou, nu ma intrebati de ce, dar în multe cazuri această problemă tinde să dispară atunci când se adaugă poziţia: faţă de un comportament greşit elementele de stil, cum ar fi acest

Sector {font-size: 18px; fundal: # cfcfcf; padding: 5px; poziţia: relativă}.

Ciudat, dar ce să spun? Dumnezeu mă binecuvânteze din RO!

I DO Partajaţi-le cu SUA, dacă aţi avut probleme similare.

Nu faptul că există doar câteva lightbox lui pe care le puteţi găsi atunci când Google. Problema cu cele mai multe lumini pe care am găsit a fost că toţi păreau a utiliza una sau alte cadre grele, JavaScript greutate, cum ar fi jQuery, Prototype, mootools şi îi place. Acestea sunt toate rece şi swanky cautati. Dar dacă cerinţa este "dar vreau un SCRIPT lightbox SIMPLU şi uşoară pentru Site-ul meu", atunci aici este;

Unele caracteristici ale acestui frumos lightbox

1. Foarte uşor
   o. 4KB de scripturi atunci când ambalate (8 kb despachetat)
   B. 2 KB din CSS
   C. Câteva linii de cod HTML pentru containere lightbox
2. Simplu să înţeleagă şi să pună în aplicare
3. Poate avea mai multe lumini de pe aceeaşi pagină.
4. Container Lightbox este folosit pentru a arăta, conţinut diferit (care este inclus separat ca diviziuni ascunse în pagină), în funcţie de link-ul / opţiunea care se face clic.
5. Automat centre, luând în considerare toţi factorii, cum ar fi, înălţimea şi lăţimea ferestrei (rezoluţia ecranului), valoarea pagina de defilare şi înălţimea a conţinutului de lightbox
6. Testat în IE 7 şi FF

Vezi Demo |
Descarca Sursa Zip Lightbox (Downloaded 1794 ori)

jo.js, jo_pack.js [versiunea ambalat]: - un set simplu de OBIECTE JAVASCRIPT [JO], care conţine elementul, ferestre şi script-uri de poziţionare a documentelor. Puteţi deschide JO.JS dacă doriţi să obţineţi mâinile murdare cu unele Javascripting avansată, crearea de funcţii abstracte, extinderea unor astfel de proprietăţi şi a elementelor. Dacă nu se prea mult în Javascripting, Lasă-l singur.

lightbox.js, lightbox_pack.js [versiune plin de]: - Contine scripturi de lumina caseta de Manager. Dacă sunteţi proiectantul paginii, de asemenea, responsabil cu punerea în aplicare a lightbox pe pagina, aveţi nevoie pentru a înţelege LightBoxManager. LightBoxManager conţine practic doar două funcţii showLightBox şi closeLightBox.

lightbox.css: - Dacă ştii CSS, poţi să te joci în jurul cu lightbox.css pentru a personaliza aspectul-N-simt lightbox.css

index.html: punerea în aplicare Exemplu de lightbox cu două conţinut diferit

lb_underlay_bkg.png: - Aceasta este lumina / Simi imagine transparentă, care este folosit de fundal pentru stratul de baza lightbox [Covorul este stratul de mai jos lighbox, care împiedică utilizatorul de la clic pe orice altă entitate pe pagină, în timp ce lightbox este deschis]. Puteţi utiliza orice imagine sau chiar o culoare solida pentru acest scop, în funcţie de designul paginii şi cerinţa.

icon_lb_close.gif: - imagine pentru mâner lightbox aproape de partea din dreapta sus a casetei de lumină. Pot folosi orice imagine ca pe proiectarea

Vezi Demo |
Descarca Sursa Zip Lightbox (Downloaded 1794 ori)

Vă rugăm să ne comentariile dumneavoastră şi feedback-ul ...

Acest post ar putea fi un exemplu bun pentru fraza "bunica Predarea de a suge ouă" ... Pentru că aceasta este doar BASIC Lucruri CSS. Dar pentru cei care, ca şi uită-mă, acest lucru ar putea fi o binecuvântare în deghizare. Intotdeauna am crezut ca (am putea pierde slujba pentru a spune acest lucru), aceasta a fost posibilă numai pentru a păstra o parte din conţinutul paginii HTML statice (sensul, poziţia sa rămâne CA ATARE pe Defilaţi Window), utilizarea unor script-uri inteligente, Fac toţi cei ştiinţifice calcule pentru a găsi poziţia de dinamic, capcană evenimente Window.scroll şi stabilirea time-out, etc

Niciodata nu gandit ca ar putea la fel de simplu ca acest lucru .... Aici, în de mai jos CSS / HTML, am patru blocuri statice, unul fixat la fiecare extrimities de pagini, sus, dreapta, jos şi stânga ... inutil sa spun ... puteti alege una sau mai multe în cazul în care trebuie să fie ...

CSS
Static {display: block; Z-index: 10; color: # FFFFFF; overflow-x: ascuns; overflow-y: ascuns; poziţie:. Ixed;
}
Conţinutul # {margin: 0px 100px 150px 160px; de frontieră: 1px solid # e6e6e6}

# Wrap-T {top: 0px; fundal: # 33CC66; latime: 100%; inaltime: 55px;}

# Wrap-L {top: 80px; fundal: # FF9966; inaltime: 300px; lăţime: 150px; de frontieră: 2px solid # e6e6e6;}

# Wrap-b {jos: 0px; fundal: # 3333CC; latime: 100%; inaltime: 55px;}

# Wrap-R {top: 80px; fundal: # 6666FF; inaltime: 300px; lăţime: 140px; de frontieră: 2px solid # e6e6e6; dreapta: 0;}

HTML
id="contents"> <div Voi conţinutul pagina principala </ div>
<div id="wrap-b" class="static">
Continut static pe partea de jos pagina
</ Div>
<div id="wrap-t" class="static">
Continut static pe Începutul paginii
</ Div>

<div id="wrap-l" class="static">
Continut static pe pagina din stânga
</ Div>
<div id="wrap-r" class="static">
Continut static pe dreapta paginii
</ Div>

Vezi un eşantion wroking aici

De multe ori ne simţim nevoia de a scrie hacks browser specfic (deşi nu este o practică bună, am dezvoltatorii UI trebuie să recurgă la astfel de rele până la marile razboaie Browsere ajunge la un armistiţiu). Mai devreme, am menţionat în acest articol Pentru schimburile de dvs. Numai , cum să scrie un fragment de CSS care ar fi vizibil pentru browserele IE <IE7 numai.

Ieri, am avut un caz, în cazul în care am vrut să scrie unele FireFox specific CSS fragmente. Ei bine! Eu nu sunt sigur dacă există un cod CSS pentru acest lucru, dar există un HTML. Există o captură Deşi, această bucată de cod HTML doesnot trece de validarea HTML. Dar, anywaz! Dacă sunteţi blocat prost sau ca atare, nu au ceea ce priveşte, pentru validare (uneori trebuie să fie crud), aţi putea folosi următorul text pentru a declara o legătură într-o foaie de stil numai FF sau chiar doar codul CSS în acest bloc. Codul este

Pune <comment> Firefox doar HTML / CSS / Scripturi aici </ comentariu>

de exemplu,
<comment>
<style>
/ * Stiluri de numai FF * /
FIELDSET {frontieră: 1px solid # dddddd;}
</ Style>
</ Comment>

Eu "m fericit pentru moment, ...

Ei bine! În mesaj mai devreme de câteva zile înapoi în ceea ce priveşte opacitate în IE8, am uitat să menţionez un punct important pe care "IE 8 modul strict nu permite pentru CSS opacitate".
Pentru cei care donot înţeleg ce vreau să spun de modul strict, aici este tutorial rapid .

O lucrare în jurul valorii de la acest lucru (Înainte de a IE Dev Team dau seama că au pavat calea pentru re-rutine de lucru peste tot în lume, pentru site-uri web folosind pop-up cu unele lumini opacitate, şi a pus din nou sprijinul pentru opacitatea) este de a utiliza o imaginea semi-transparent ... de preferinţă în format PNG (am avut experienta neplacuta a obţine imagini GIF transparente pentru a lucra ca au fost trebuia sa). Crearea unei imagini PNG de culoare şi de procentul de transparenţă vă place, aveţi în editorul de imagini favorit şi să-l utilizaţi ca o imagine de fundal pentru suprapunerea lightbox dumneavoastră.

de exemplu
În loc de ceva de genul asta

. Lighbox_overlay {
background-color: # FFFFFF;
Z-index: 1001;
-Moz-opacitate: 0,6;
opacitate: 0.60;
filtru: alpha (opacity = 60);
}

Faceţi acest lucru ....

. Lighbox_overlay {
background: url (bkg.png) repetare;
}

Pentru a încerca, CLICK AICI! | LA DOWNLOAD, CLICK AICI!

Dacă vizualizaţi această pagină în IE8, atunci trebuie să fi văzut un fundal complet alb opac din spatele acestui mesaj. Ieri, coleg mea a subliniat acest lucru pentru mine (ca eu sunt unul dintre acei oameni care se adaptează la schimbările încet şi constant ... mai ales browsere. Ar putea spune, Im un laş, dar aşa să fie .... Fiind un dezvoltator de UI, eu sunt mereu rahat speriat de noi versiuni de browser ... ştii ce Im tlaking despre, dreapta?)

Săpat în jurul valorii de timp, încercând să găsească o soluţie pentru a remedia problema şi apoi ceea ce ...
Acest timpul nostru ALL TIME FAVORIT browser-ul le-a făcut peste tot din nou, prin cădere tot sprijinul pentru opacitatea CSS. Non-standard `filtru: alpha (opacity = # #)` CSS atribut a fost eliminat, Nisa, dar, de asemenea, total uitat să adăugaţi suport CSS3 opacitate (ca şi cum toate alt browser frumos au tinut-o in). Deci, pentru prima dată de la Dumnezeu ne-a spus despre CSS opacitate (de la IE 5.0, cred), un browser web nu va sprijini CSS opacitate.
Şi acum pentru crema pe partea de sus: cuvânt oficial de la IE 8 echipe? Este "de design" si "ne va lua în considerare acest lucru într-o versiune viitoare a IE".

PS: Încercaţi această pagină în FF, jur se pare elegant!

Când am citit acest articol pe A List Apart " Faux absolut de poziţionare
de Eric Sol ", am fost nimic mai puţin decât impresionat. Am fost, de asemenea, deprimat majorly, cauza, sincer ma intrebam, de ce cant eu vin cu ceva fabulos ca acest lucru.

De obicei, atunci când vom crea layout CSS, vom folosi "POZIŢIE" sau "Floats", sau o combinaţie foarte rău de atât. Eric Sol şi echipa sa definesc o noua tehnica de a perfecta un nou tip de tehnica de aspect CSS, pe care le-au botezat "Faux poziţionare absolută", după tehnica faux coloane care simulează prezenţa unei coloane.

Ştiţi că problema noi toţi dezvoltatorii de CSS au cu machete dezintegrare (Cele schimbări neaşteptate de conţinut care produc coloane întregi pentru a încheia, atunci când vom folosi aspecte pluteau) ... Ei bine! Istoria pare!!
Aceasta tehnica aspect este încă foarte tânără, şi trebuie să calcata de toate aceste guru CSS acolo, înainte de a deveni un standard al ONU în scris. Sunt fericit să-l folosească ACUM! ... Şi am deja în mijlocul de a converti mele anterioare problematice / plutitoare ne-neapărat aspecte în structura FAP deja ... şi sunt bucuros să spun "noi folosim deja de pozitionare Faux absolut pentru site-ul blog-ul, precum şi" ... GO încercaţi să-l, ACUM!

Kudos Eric!!

Dacă aţi făcut vreodată (sau de a face o) un meniu vertical cu ajutorul elementelor de listă (LI) tag-uri şi CSS, s-ar putea întâlni, aceasta încă un bug în Internet Explorer, în cazul în care IE 6 insertii de aceste diferenţe dintre elementele din listă care conţin elemente de nivel bloc, şi anume în cazul în care există spaţiu între elementele din lista de marcare. Multumesc, dar nu, mulţumesc, versiunea IE 7 pare a fi liber de acest bug.
În cazul în care ca mine, şi mai multe, vă aparţin, aceasta banda de dezvoltatori frustraţi, care încă mai au pentru a obţine lor de aspecte noi, care lucrează în IE6 de asemenea, atunci acest lucru s-ar putea dovedi util. Arunca o privire ...

Exemplu de marcare:

<ul id="menu">
<li> <a href="#"> Prima </ a> </ li>
<li> <a href="#"> Despre </ a> </ li>
<li> <a href="#"> Servicii </ a> </ li>
<li> <a href="#"> Portofoliu </ a> </ li>
<li> <a href="#"> Întrebări frecvente </ a> </ li>
<li> <a href="#"> Contactaţi-ne </ a> </ li>
</ UL>

S-ar putea crea unele CSS, similar cu cel de mai jos, pentru a transfrom markup-ul de mai sus într-un meniu vertical ....

Exemplu CSS ...
# Meniu {
0; padding:: Marja de 0; fundal: # FF9900;
lista-stil-tip: none; lăţime: 150px;
}
# Meniu li {margin: 0; padding: 0;}
# Un meniu {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Rezultatele pe care le vor vedea ...

Soluţia pentru această problemă ... (modificat / CSS adăugat în caractere cursive aldine)

# Meniu {
0; padding:: Marja de 0; fundal: # FF9900; lista-stil-tip: none; lăţime: 150px;
float: left; / * aceasta conţine elemente pluteau listă * /
}
# Meniu li {
0; padding:: Marja de 0;
float: left; / * Aceasta stabileşte * /
Lăţime: 100%; / * bug spaţiu în IE6 * /
}
# Un meniu {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Dacă doesnot soluţie de mai sus par să lucreze (din motive cunoscute doar la IE6) ... încercaţi această metodă în locul

Adăuga doar acest stiluri IE6 doar pentru marcare ta ...

<- [If lt IE 7>
<style type="text/css">
# Meniu Li o {display: inline-block;}
# Meniu Li o {display: block;}
</ Style>
<[Endif] ->

Pune Stylesheets la Top

Dacă doriţi o pagină pentru a încărca în mod progresiv, care este, vrem browser pentru a afişa orice conţinut pe care îl are, cât mai curând posibil, a pus CSS la partea de sus a paginii interiorul capului documentului. Acest lucru face ca paginile par a fi de încărcare mai rapid, deoarece aceasta facilitează redarea progresivă a paginii. Acest lucru este important mai ales pentru paginile cu o mulţime de conţinut şi pentru utilizatorii de pe conexiuni internet mai lente.

Este un fapt documentat că, pentru a spori experienţa utilizatorului în general, este important să se asigure indicatori de progres şi de feedback-vizuale. Pentru a evita având în a aspira elemente ale paginii, în cazul în care stilurile lor de schimbare, unele browsere, IE inclusiv, blocuri de redare a paginii până la CSS este complet încărcată. Din acest motiv, utilizatorul este de ajunge la a vedea o pagină albă goală.

Cele W3 Specificatii HTML ', de asemenea, afirmă că CSS trebuie să mă includă în secţiunea HEAD a paginii HTML. at the bottom of the page, so it's best not to use it. De asemenea, reţineţi că, în IE @import se comporta la fel ca utilizarea <link> la partea de jos a paginii, asa ca nu este cel mai bine să-l folosească.

Evitaţi utilizarea Caracteristici anumit browser

Filtre: Filtru de utilizare a creşte consumul de memorie şi se aplică pe element, nu pe imagine, astfel încât problema se înmulţeşte. De asemenea, Filtrele sunt IE de proprietate, prin urmare, nu va funcţiona aşa cum este prevăzut în alte browsere. Dacă doriţi medii transparente sau gradientului, utilizaţi 1Pixel cu imagini.
Expresii: expresii CSS sunt o caracteristică frumos de a avea în CSS, dar încă mai este caracteristică specifică IE. De asemenea, este important de remarcat faptul că, aceste expresii sunt evaluat atunci când pagina este redat şi redimensionate, defilat şi chiar şi atunci când utilizatorul se deplasează mouse-ul peste pagina. Inutil să spun acest lucru ar putea afecta performanţa a paginii. Prin urmare, în cuvinte simple, folosind expresii Evitaţi CSS, cu excepţia cazului te simţi argumentele sale ", cantareste mai mult decat contra sale"

Externaliza ai CSS

Folosind CSS extern va duce la încărcarea mai rapidă a pagini, deoarece fişierele JavaScript şi CSS sunt memorate în cache de către browser. Inline CSS în documentele HTML se descărcate de fiecare dată când documentul HTML este solicitat. Acest lucru ar putea reduce de fapt, numărul de cereri HTTP facute, dar creşte ulterior dimensiunea documentului HTML. CSS extern sunt memorate în cache de către browser-ul, dimensiunea documentului HTML este redusă, fără a creşte numărul de cereri HTTP.

Vă rugăm să reţineţi că, în cazul în care utilizatorii de pe site-ul dvs. are mai multe vizualizări de pagini pe sesiune şi multe dintre paginile dvs. de re-folosesc script-urile şi aceleaşi stil, există un beneficiu mai mare potenţial de fisiere cache externe.

Ambalaj fişier CSS

Ambalare sau ronţăit CSS-ul este practica de a elimina caractere inutile de la codul pentru a reduce dimensiunea sa, prin urmare, îmbunătăţirea ori de încărcare.

CSS poate ma crunched prin eliminarea toate comentariile şi alte caractere nedorite, cum ar fi spaţii albe, rânduri libere, etc

Mesaj IE 6, Microsoft Internet Explorer a fost un fel de ajuns pentru a ne dezvoltatorii UI prin adăugarea de câteva proprietăţi mai CSS standard pentru cele mai multe alte browsere standard. Un astfel de proprietate util în "min-height". Proprietate destul de drept înainte, care are nevoie de nici o explicaţie mult tărăgănat. Atunci când un min-înălţime pentru o divizie este stabilit, se păstrează întotdeauna că atunci când înălţimea set de conţinut pe care îl ocupă mai puţin de case se pot ţine şi mai important, (spre deosebire de simplu de vanilie "înălţime" proprietate), Balanta sau în cuvinte CSS, se comportă ca un divizare ale căror "înălţime" este setat pe "Auto" ...

Pentru unii dintre noi dezvoltatori sărace, care sunt inca necesare pentru a codului CSS care trebuie să lucreze, de asemenea, în IE6, ne-disponibilitate a "min-height", ar putea dovedi un dop de spectacol cândva ... donot disperare.

Din fericire, avem destule ciudatenii în IE, care ne-ar folosi pentru a beneficia în şi modificaţi prin modul nostru de a ajunge la scopul nostru ... adică face o Divizia ca şi cum de min-height în IE6

Soluţia 1: Utilizarea Hack Liniuţele de subliniere [ ... Citeste mai mult ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Soluţia 2: Folosirea atributului CSS Selector de Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


Hack CSS Selector de atribut se profite de fapt, mai devreme browsere IE6 THA ignorat atribute-selector. Notă cerinţa de alta divizie recipient cu class = "someclass". Doar presense de atributul class pentru această divizie, suprascrie înălţimea înapoi la auto pentru Opera, Mozilla şi MSIE7 şi mai târziu. IE6, care nu acceptă Selectoare de atribute, se ignoră.

Vezi Demo de hack min-înălţime pentru IE6