Exprimarea IT

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!

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

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!

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ă

Aţi observat uneori, cum lucrurile simple, doar refuză să lucreze în IE6 ... location.href este doar un astfel de lucru.

Dacă aţi adăugat o funcţie de onclick pentru tag-ul ancora ca mai jos ...

<a href="javascript:void(0);" onclick="onClickLink('xxx');"> du-te la noua locaţie </ a>

Cu unele funcţionează ca acest ...
Funcţia onclickLink (id) {
var URI = "test2.html id =?" + ID-ul;
window.location.href = URI;
}

Pentru a ironia dumneavoastră, ar observa că o astfel de bucata de script simplu refuză să lucreze în IE ... bine! Pot discuta motive aici, dar nu cred ca va fi util ... Deşi, eu nu par să aibă o soluţie de ... (Pun pariu ca daca intelegi Javascript, veţi înţelege, de ce am adăuga acest truc pentru IE6)

Soluţie

<a href="javascript:void(0);" onclick="onClickLink('xxx'); întoarcere false; "> du-te la noua locaţie </ a>

Dacă aveţi orice răspunsuri simple, vă rugăm să faceţi scrie un comentariu. Acesta va fi într-adevăr appretiated, pariez, de multe!

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 :)

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.

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.