2011 07 iulie 2011

Problema de CSS hack

Dacă citiţi acest lucru într-un blog ... crezut ca a fost frumos de a cataloga acest lucru pentru viitor ref .... asemenea, ar putea fi o întrebare interviu important pe care aţi cerut-o zi ....

Scrie un fragment de CSS, care va afişa un paragraf în albastru, în browserele mai vechi, roşu în browsere noi, verde în IE6 si IE7 în negru

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}


2008 10 octombrie 2008

NU pentru numai pentru IE - Selectori CSS copii nu funcţionează în IE

CSS pentru non-IE browsere: ei nici o veste de la dezvoltatorii de CSS care, CSS Selectori pentru copii, cum ar fi exemplul de mai jos, nu par să lucreze în IE.

de exemplu, div span> {unele} CSS, înseamnă că "atunci când un element de control este un copil (şi nu un nepot sau un copil mare mare, etc) a unui element de divizare".

Dar am folosit acest context pentru avantajul nostru. Punct de vedere istoric, selectorul de copil a fost folosit pentru a ascunde comenzi CSS din IE. Pur şi simplu prin plasarea html>body , în faţa a orice comanda CSS IE va ignora:

html>body .foo { CSS commands go here ;}

Acest lucru funcţionează pentru că <body> este întotdeauna un copil de <html> - poate fi, desigur, nu un nepot sau mare-nepot de <html> .

Acum, că IE 7 înţelege selectorul de copil, trebuie să introduceţi o etichetă comentariu gol în direct, după mai mare decât semnul IE 7 nu va înţelege acest lucru, atunci selectorul de (cine stie de ce?!) Şi, prin urmare, va ignora total această comandă CSS.:

html> /**/ body .foo { CSS commands go here ;}

Dacă nu s-au văzut deja înainte de acestea, au o citire prin următoarele, precum şi


2008 04 octombrie 2008

Dispariţia HTML / DIV elemente în Internet Explorer [IE]

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.


2008 20 iunie 2008

Bug spaţiu alb în linie / Lista de Produse (LI), în IE6

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 ...
null

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] ->


2008 12 aprilie 2008

CSS Crucea minime pentru browser Înălţime Hack

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



2008 15 martie 2008

Iritante Cutii Selectaţi vizibil prin diviziile Popup

La ocazii mai multe, în timp ce faci machete de pagini cu divizii pop-up / lumini / Sfaturi, etc am ajuns în situaţii în care unele obiecte de formular SELECT se întâmplă să fie în conformitate cu aceste diviziunile pop up, de proiectare şi arată, prin .... YuK!

Ei bine! ai putea rezolva cu usurinta acest lucru prin ajustarea dvs. Z-INDEX valori corespunzător pentru FF si IE7. Dar, bun vechi (joc de cuvinte destinate), IE6 nu se comporta ca destinate .... Arată BOX SELECT, prin, chiar şi după aplicarea unor drastic ridicate Z-INDEX valori de la Divizia de PopUp ... Dezamăgire!!

Nu există soluţii pentru această problemă, dar există, cred eu, mai mult decât o modalitate de a lucra câteva, în jurul valorii de această problemă, dar im aici să vă spun mai simplă soluţie pe care am folosi, care functioneaza bine pentru mine, în cea mai mare parte cazuri ....

"Ascunde ROUGE BOX Selectaţi când SHOW POPUP"

Pur şi simplu, în fragmentul de script-ul dvs. în cazul în care va arăta pop-up, adăugaţi o bucată de script pentru a seta vizibilitatea Box SELECT pentru a "ascuns"

document.getElementById ('my_select') style.visibilty = "ascuns".;

Şi amintiţi-vă să-l dăm înapoi pe Închidere a diviziei de PopUp

document.getElementById ('my_select') style.visibilty = "vizibil".;

în cazul în care "my_select" este ID-ul de Box iritare SELECT

Sper că acest lucru ajută la ...

PS. Există opţiuni, cum ar fi desigur alte positionining dinamic un IFRAME (aceeasi dimensiune ca ai pop-up) în conformitate cu DIV Popup ... Acest lucru functioneaza prea bine, dar cu un plus de incarcatura de elemente DOM, Scripturi si dureri de cap. Am folosit această soluţie de asemenea, şi dacă aveţi nevoie de ajutor cu această opţiune, nu să-mi spuneţi. Va fi bucuros să vă ajute!


2008 08 ianuarie 2008

Comentarii Condiţionat: Pentru ca schimburile de-Numai partea Duex

Câteva luni mai devreme am vazut, cum am putea include o bucata de CSS care ar fi vizibile doar la IE6 ( Pentru schimburile de dvs. Numai ). Există şi alte modalităţi de a realiza acest lucru, de asemenea. Include o simplă separat CSS, specifice IE ţintă. acest lucru ar putea fi realizat cu ceea ce este numit ca Comentariile condiţionate.

Comentarii condiţionale este o modalitate de a detecta tipul de browser şi versiune. De detectare a browserului este efectuat pentru a se asigura că conţinutul prezentat browser-ul specific. De detectare a browserului se poate face folosind mai multe tehnici diferite. Această metodă are mai multe avantaje fata de metodele anterioare, care a inclus schimbarea stilului folosind javascript. Pentru a lista de important puţini, ar fi;

  • Scripting, nu este necesară
  • Cross-browser

Cum facem acest lucru?

Fă ceva în IE 5 numai
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Fă ceva în toate versiunile IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Fă ceva, în toate versiunile de IE mai noi, care IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Pentru mai multe vartiations condiţionate, citiţi aceste informaţii pe MSDN:
Despre Comentariu condiţionată


2007 08 septembrie 2007

Pentru schimburile de dvs. Numai

Dacă aţi fost scris în timp ce pentru CSS, va avea experimenta acele momente când te trage literalmente parul tau, atunci layout CSS uitat bine în toate browserele noi (adica browsere mai târziu de IE6), dar IE 6 aruncă un acces de furie. Sunteţi lupta din greu pentru a ajusta CSS-ul, dar aceasta nu funcţionează bine ...! Încercaţi Aceste Hacks ...

1. Subliniere Hack: -
Prin definiţie, CSS 2.1 caietul de sarcini permite subliniere ("_"), în identificatori CSS. Dar mai multe browsere încă par să ignore orice identifică procedat cu o liniuţă de subliniere, dar IE. Acest bug IE / facilitate, astfel, devine un mod foarte clar pentru a seta proprietăţi CSS pentru schimburile de numai. asa ca nu uita, o proprietate CSS în scris, cu subliniere pe de start este vizibil pentru Internet Explorer (toate versiunile, dar IE 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

Ţinând seama de această demonstraţie de subliniere hack

De asemenea, hack min-înălţime pentru IE6 foloseste hack subliniere, a verifica afară


2. Diez (#) Hack: -
Ca subliniere hack, aceasta este prea este pentru schimburile de Oly, cu o diferenta de bun, de identificare de proprietate au precedat cu # pe de start este vizibilă pentru toate versiunile de IE, IE7 a inclus si este invizibil pentru orice browser standard de alta.

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}

Acest hack a fost utilizat frumos pentru a demonstra un browser cruce verticală alinia soluţie, au o privire la acest articol pentru a afla mai multe nostru


3. CSS pentru IE6 numai: -
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}

Aceste hacks pare cer a trimis, atunci când nimic altceva nu functioneaza ... Dacă oricare dintre aceste hacks salvează viaţa ta într-o zi, dont uitaţi să mă trateze la o cafea :)


2007 12 iulie 2007

Mouseover eveniment într-o divizie transparentă în IE

Am avut această problemă în cazul în care, dacă aţi avut un eveniment mouseover pe o diviziune (DIV) şi că diviziunea, pentru un motiv bun trebuie să fie transparente (ca în cazul meu, unde a fost necesar pentru a afişa unele tag-uri de peste o imagine de pe mouseover de această diviziune transparentă), IE nu a reuşit să declanşeze evenimentul mouseover (a lucrat bine în Firefox).

Opţiuni au încercat mai multe ... multe dintre care a fost doar o încercare disperată de a ajunge la eveniment pentru a trage în IE. Una dintre cele sensibile, care m-am gândit s-ar putea lucra a fost de a seta o culoare de fundal pentru diviziunea şi setaţi opacitatea la zero ... Ei bine! semn de muncă!

Soluţia finală, care părea să lucreze şi să nu perturba funcţionalitatea am cerut a fost de a pune un pixel o repetate / imagine de fundal transparent, în care diviziunea

Prost ...! dar acum IE pare fericit.


2007 11 iunie 2007

IE6 marja de eroare în dublu elemente pluteau

Simplu ... Pentru a corecta această problemă de afişare de utilizare: inline.

div {float:left;margin:40px;display:inline;}

Dacă aveţi un element plutea, cum ar fi un div şi vă plasaţi marja de-dreapta-stânga sau de marja de la acest element, Internet Explorer 6.0, care va dubla valoarea marjei, încurc aspectul HTML / CSS. Pentru a remedia acest lucru pur şi simplu adăugaţi de afişare: inline; la elementul de flotant.


NDK acasă | Exprimarea IT | Gust Exprimarea | Penmenship Exprimarea | Awe Exprimarea | a mă exprima