Ki ga izraža

Če si ogledujete to stran v IE8, morate biti videti popolno neprozorno belo ozadje zadaj to delovno mesto. Včeraj je moj collegue je na to opozorila, da me (kot sem jaz eden izmed tistih ljudi, ki se prilagodijo na spremembe počasi in vztrajno ... predvsem brskalnikov. Bi rekli, Im strahopetec, ampak tako je to .... Kot razvijalec UI, sem vedno sranje strah nove različice brskalnika ... veš, kaj Im tlaking okoli, kajne?)

Kopa približno za nekaj časa, poskuša najti rešitev, da to popravimo, in kaj potem ...
Tokrat je naša ALL TIME Priljubljen brskalnik uspelo znova ga spustite vso podporo motnosti CSS. Nestandardne 'filter: alpha (opacity = # #)' CSS atribut je bil odstranjen, Nice, ampak tudi povsem pozabil dodati CSS3 motnosti podporo (na primer, kako je vse drugo brskalnik lepo so jo hranijo v). Torej, prvič, ker nas je Bog povedal o CSS motnosti (od IE 5.0, se mi zdi), spletni brskalnik ne podpira CSS motnosti.
In zdaj za smetano na vrhu: Uradni beseda iz IE 8 ekipe? To je "by design" in "bomo, da je to v prihodnji različici IE".

PS: Poskusi to stran v FF, prisežem, da izgleda lepo!

Če ste doslej (ali pa kar eno) vertikalnim Meni uporabo elementov seznama (LI) oznake in CSS, lahko naletite, je to še ena napaka v Internet Explorerju, kjer IE 6 vložki teh razlik med elementov seznama, ki vsebujejo elemente na ravni blokov, ki se pravi, če obstaja kakršen koli presledke med seznamom postavk v pribitkom. Hvala, ampak ne hvala, različica IE 7 se zdi, brez tega hrošča.
Če, kot sem jaz in še veliko več, lahko spadajo v to skupino od frustriranih razvijalcev, ki še vedno imajo, da bi dobili svoje nove postavitve, ki delajo v IE6 preveč, potem bi to lahko izkaže za koristno. Oglejte si ...

Vzorec oznake:

<ul id="menu">
<li> <a href="#"> Home </ a> </ p>
<li> <a href="#"> O </ a> </ p>
<li> <a href="#"> Storitve </ a> </ p>
<li> <a href="#"> Portfolio </ a> </ p>
<li> <a href="#"> Pogosta vprašanja </ a> </ p>
<li> <a href="#"> Kontakt </ a> </ p>
</ Ul>

Morda boste ustvarili nekaj CSS, podoben spodnjemu, da transfrom zgornje oznake v navpičnem meniju ....

Primer CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
Seznam-style-type: none; širina: 150px;
}
# Meni li {margin: 0; padding: 0;}
# Menu {zaslon: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-višina: 2,5; meja bottom: 1px solid # FFF;
}

Rezultate boste videli ...

Rešitev za to napako ... (spremenjene / dodane CSS s krepkim poševnim tiskom)

# Menu {
margin: 0; padding: 0; background: # FF9900; seznam-style-type: none; širina: 150px;
float: levo; / * ta vsebuje zraku spisek izdelkov, * /
}
# Meni li {
margin: 0; padding: 0;
float: left; / * Ta določa * /
širina: 100%; / * presledke napako v IE6 * /
}
# Menu {
Zaslon: blok; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-višina: 2,5; meja bottom: 1px solid # FFF;
}

Če je zgoraj rešitev doesnot zdi, da dela (zaradi znanih le IE6) ... poskusite to metodo namesto

Dodajte to dodatna IE6 le sloge za vaše pribitkom ...

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

Ob različnih priložnostih, medtem ko delaš postavitve strani z popup oddelki / lightboxes / Nasveti itd srečamo primere, ko neko obliko Izberi predmete zgodi, da je v teh Popup oddelkov, pri načrtovanju in kaže skozi .... Yuk!

No! da bi lahko z lahkoto popravite tako s prilagajanjem vaše Z indekse vrednosti primerno za FF in IE7. Dobro, ampak star (pun namenjena) IE6 ne obnašajo kot je bilo predvideno .... SELECT BOX kažejo skozi, tudi potem, ko ste uporabili nekaj drastično visoke Z indekse vrednosti ... tvoj PopUp Division Bummer!!

Ni določa za to težavo, vendar je po mojem mnenju, več kot nekaj poti v službo, to težavo, vendar im tukaj, da vam povem najpreprostejšo rešitev, ki ga uporabljam, ki deluje dobro za mene, v večini primerov ....

"Skrivanje Rouge SELECT polja, ko prikažete POPUP"

Preprosto v vašem scenarija izrezek, kjer pokažete svoje ljudstvo, dodamo košček scenarij za določitev prepoznavnosti oknu Izbira na "skritih"

document.getElementById ("my_select) style.visibilty =" skrito ".;

In ne pozabite, da ga je nazaj na koncu vašega pojavnih oddelka

. document.getElementById ("my_select) style.visibilty =" vidni ";

kjer "my_select" je ID za draženje oknu Izbira

Upam, da to pomaga ...

PS. Obstajajo tudi druge možnosti, kot gredo zraven dinamično positionining tudi IFRAME (enake velikosti, kot ste PopUp) v pojavnem DIV ... To dobro deluje preveč, vendar z dodatkom kupe DOM elementov, skripte in glavobolom. Imam uporabljajo to rešitev, preveč, in če vam potrebujete pomoč pri tej možnosti, pa mi sporočite. Bodo z veseljem pomagali!

Nekaj ​​mesecev prej smo videli, kako bi lahko vključeval del CSS, ki bi bila vidna le IE6 ( Za vašo IES Only ). Obstajajo tudi drugi načini za doseganje tega pa tudi. Vključuje le ločeno CSS, specifične za vaš ciljni IE. To bi lahko dosegli s tem, kar se imenuje kot Pogojno komentarje.

Pogojni Komentarji, je način, da zazna vrsto in različico brskalnika. Brskalnik odkrivanje je, da se zagotovi, da je vsebina predstavljena brskalnika posebne dejavnosti. Brskalnik odkrivanje je mogoče storiti z uporabo več različnih tehnik. Ta metoda ima več prednosti v prejšnjih metod, ki so vključeni v slogu preklapljanje z uporabo javascript. V seznam pomembno nekaj, bi bilo;

• Skripte ni potrebno
• Cross-browser

Kako to storiti?

Naredite nekaj v IE 5 le
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Naredite nekaj v vseh verzijah IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Naredite nekaj v vseh verzijah IE novejše da IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Za več pogojnih vartiations, preberite te informacije na MSDN:
O Pogojno Komentar

Ste opazili, včasih, kako preproste stvari le ne želi delati v IE6 ... location.href je prav tako stvar.

Če ste dodali funkcijo onclick do vaše sidro oznako, kot je spodaj ...

<a href="javascript:void(0);" onclick="onClickLink('xxx');"> Pojdi na novi lokaciji </ a>

Z nekaj funkcij, kot je ta ...
Funkcija onclickLink (id) {
var URI = "test2.html id =?" + id;
window.location.href = URI;
}

Na vaš ironijo, bi opazili, da tak kos preprost scenarij noče delati v IE ... No! Ne morem razpravljati o razlogih tukaj, vendar ne mislim, da bo vredno ... Čeprav se mi zdi, da imajo rešitev ... (Stavim, da če boste razumeli, Javascript, boste razumeli, zakaj smo dodali ta poteg za IE6)

Rešitev

<a href="javascript:void(0);" onclick="onClickLink('xxx'); vrnitev false; "> Pojdi na novi lokaciji </ a>

Če ste vse preproste odgovore, vas prosimo, da napišite komentar. To bo res appretiated, stavim, z Veliko!

Če ste bili pisno CSS za nekaj časa, bi si morali doživeti tiste čase, ko dobesedno vleči vaše lase, ko se CSS postavitve pogledal lep v vseh novih brskalnikov (mislim brskalnikov pozneje kot IE6), vendar IE 6 vrže Tantrum. You borijo težko prilagoditi CSS, vendar to ne deluje ... No! Poskusite te Hacks ...

1. Podčrtaj Hack: -
Po definiciji, CSS 2,1 specifikacija omogoča podčrtaj ("_") v identifikatorjev CSS. Toda mnogi brskalniki še vedno zdi, da prezreti vse opredeljuje nadaljevala s podčrtajem, ampak IE. To je IE bug / funkcija tako postane zelo jasen način za določitev CSS lastnosti za IES samo. tako ne pozabite, nepremičnine CSS pisno poudarjajo na začetku z vidno za Internet Explorer (vse različice, vendar IE 7)

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

Poglej dokaz za to poudarjajo kramp

Tudi, min-višina kramp za IE6 uporablja podčrtaj kramp, si oglejte

2. Hash (#) Hack: -
Kot poudarjajo kramp, ta je preveč, je za IES OLY, z dobro razliko, je lastnina identifikatorji predhodna s # na začetku vidna za vse različice IE, IE7 vključena in je nevidna za druge standardni brskalnik.

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

To kramp je lepo uporabiti za dokaz navzkrižno brskalnik vertikalni uskladitvi rešitev, si oglejte v tem članku, da bi našli naša več

3. CSS za IE6 samo: -
#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*/
}

Ti hacks zdi nebesa poslal, če ne gre drugače ... Če je kateri od teh hacks prihrani svoje življenje nekega dne, dont pozabite, da mi privoščite kavo :)

Sem imel to težavo, kjer, če ste imeli mouseover dogodek na delitev (DIV) in je ta delitev, nekaj dobrega razloga morala biti pregledna (kot v mojem primeru, kjer je bilo potrebno prikazati nekatere oznake v sliko na mouseover za to transparentno delitev), IE ni uspelo sprožiti mouseover dogodek (delal globe v Firefox).

Poskusili več možnosti ... od katerih je samo obupana poskus, da bi dobili dogodek, da ogenj v IE. Eden od tistih, ki smiselne, da sem mislil, bi si bilo določiti barvo ozadja z delitvijo in nastavite motnosti na nič ... No! Trud work!

Končna rešitev, ki je zdelo, da delajo in ne moti funkcionalnost sem bila zahteva, da dajo eno piko ponovil / pregledno sliko ozadja v tem oddelku

Silly ...! zdaj pa IE zdi srečen.

Enostavno ... Za odpravo te težave prikaz uporabe: inline.

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

Če imate v zraku element kot je div in postavite margin-desno ali levo na margin-tega elementa, bo Internet Explorer 6.0 podvojiti vrednost marže, mesijanski ki gre gor html / css postavitev. To popravite tako preprosto dodate izpis: inline; za vaše plavajoče elementa.