Väljendades IT

Kui sa vaatad selle lehekülje IE8, siis tuleb näha täielikku läbipaistmatu valge tausta sellele ametikohale. Eile minu kolleeg juhtis sellele mulle (nagu ma olen üks neist inimestest, kes kohaneda muutustega aeglaselt ja ühtlaselt ... eriti brauseritega. Võib öelda, Im argpüks, aga olgu nii .... Olles UI arendaja, ma olen alati sitta karda uue brauseri versiooni ... sa tead, mida Im tlaking kohta, eks?)

Kaevasid umbes samal ajal, püüdes leida lahendust parandada ja mis siis ...
Seekord meie All Time FAVOURITE brauser on teinud kõik jälle viskamine kõik toetust CSS läbipaistmatus. Mittestandardsete `filter: alpha (läbipaistmatuse = # #)` CSS atribuut on eemaldatud, Nice, kuid neil on ka täiesti unustasin lisada CSS3 läbipaistmatus tugi (nagu kuidas kõik teised brauseri kenasti hoidnud seda). Niisiis, esimest korda alates JUMAL rääkis meile CSS läbipaistmatus (alates IE 5,0, ma arvan), veebibrauser ei toeta CSS läbipaistmatus.
Ja nüüd koor peal: Official sõna IE 8 meeskond? See on "by design" ja "me kaalume seda tulevase versiooni IE".

PS: Proovige seda lehte FF, vannun see näeb kena!

Kui teil on kunagi teinud (või tegemise 1) vertikaalne menüü abil loendiüksuste (li) sildid ja CSS, siis võib tekkida see järjekordne viga Internet Explorer, kus IE 6 lisab need erinevused loendiüksuste mis sisaldavad ploki taseme elementide st kui on tühik vahel Loendiüksused märgistuskeel. Thanks, kuid tänu IE versiooni 7 tundub vabaks see viga.
Kui meeldib mulle, ja palju muud, te kuulute sellesse bänd pettunud arendajad, kes on veel saada oma uue paigutusega, töötades IE6 liiga, siis see võib osutuda kasulikuks. Have a look ...

Proovi märgistuskeel:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> About </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> KKK </ a> </ li>
<li> <a href="#"> Kontakt </ a> </ li>
</ Ul>

Sa võid luua mõned CSS, mis on sarnane 1 alla, et transfrom eespool juurdehindlus sisse vertikaalne menüü ....

Proovi CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; laius: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu {kuva: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # fff;
}

Tulemused näed ...

Lahendus see viga ... (muudetud / lisatud CSS paksus kaldkirjas)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; laius: 150px;
float: left; / * see sisaldab paisati loendiüksuste * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * See fikseerib * /
Laius: 100%; / * tühik viga IE6 * /
}
# Menu {
kuva: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # fff;
}

Kui eespool esitatud lahust doesnot tunduda tööle (põhjustel teada IE6 ainult) ... proovida seda meetodit asemel

Lihtsalt lisada see täiendava IE6 ainult stiilide märgistuskeel ...

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

Mitmel korral, tehes samal ajal lehe paigutusega popup osad / Valgusreklaam / Tips jne me kohanud olukordi, kus mingil kujul SELECT objektide juhtub olema nendel POPUP rajoonid, mille konstruktsioon ja see näitab läbi .... YUK!

Hästi! võid kergesti kindlaks see, korrigeerides oma Z-INDEX väärtused asjakohaselt FF ja IE7. Aga vana hea (pun mõeldud) IE6 ei käitu nagu ette nähtud .... SELECT BOX näitavad läbi, isegi pärast seda, kui kohaldatakse mõne drastiliselt kõrge Z-INDEX väärtusi oma PopUp Division ... kurb!!

On NO määratakse see probleem, kuid on olemas, ma usun, et rohkem kui paar teel tööle-ümber see probleem, kuid Im siin teile kõige lihtsam lahendus, et ma kasutan, mis töötab hästi minu jaoks, enamikus juhtudel ....

"Peida ROUGE SELECT kasti, siis sa NÄITA POPUP"

Lihtsalt oma skripti väljavõte, kus teil näidata oma popup, lisada tükk script määrata nähtavus SELECT Lahter "Varjatud"

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

Ja pidage meeles, et seada see tagasi CLOSE oma PopUp osakond

document.getElementById ('my_select "). style.visibilty =" nähtav ";

kus "my_select" on ID ärritus SELECT Box

Loodan, et see aitab ...

PS. On loomulikult ka teisi võimalusi nagu dünaamiliselt positionining IFRAME (sama suur kui te PopUp) all Popup DIV ... See toimib hästi ka, aga lisamine koormate DOM Elements, skripte ja peavalu. Olen kasutanud seda lahendust ka ja kui sa vajad abi selle võimaluse, ärge andke mulle teada. On hea meel aidata!

Paar kuud varem nägime, kuidas me võiks hõlmata tükk CSS oleks nähtav IE6 ainult ( Teie te ainult ). On ka teisi võimalusi selle saavutamiseks samuti. Lihtsalt sisaldama eraldi CSS, konkreetselt teie eesmärk IE. seda on võimalik saavutada, mida on kutsutud Tingimuslik Kommentaarid.

Tingimuslik Kommentaarid on võimalus avastada brauseri tüüp ja versioon. Browser avastamiseks tehakse, et tagada sisu esitatakse brauseri konkreetne. Browser avastamine võib teha, kasutades erinevaid tehnikaid. See meetod on mitmeid eeliseid varasemate meetoditega, mis sisaldas style vahetamine, kasutades javascripti. Nimekirja tähtis vähe, oleks;

• Scripting ei nõuta
• Cross-brauseri

Kuidas seda teha?

Kas midagi IE 5 ainult
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Kas midagi kõik IE versioonid
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Kas midagi kõik IE versioonid uuemad mis IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Rohkem tingimisi vartiations, loe seda infot MSDN:
Umbes Tingimuslik kommentaar

Kas olete märganud, mõnikord, kuidas lihtsad asjad lihtsalt keeldub tööle IE6 ... location.href on lihtsalt selline asi.

Kui olete lisanud onclick funktsiooni oma ankrusildi nagu allpool ...

<a href="javascript:void(0);" onclick="onClickLink('xxx');"> minna uude asukohta </ ​​a>

Mõne funktsiooni niimoodi ...
funktsioon onclickLink (id) {
var URI = "test2.html? id =" + id;
window.location.href = URI;
}

Oma iroonia, siis oleks märgata, et selline tükk lihtne script keeldub tööle IE ... Noh! Võin arutada põhjustel siin, kuid ei usu, see on seda väärt ... Kuigi, ma ei näi olevat lahendust ... (ma võin kihla vedada, kui sa mõistad, Javascript, te mõistate, miks me lisada see näpistama jaoks IE6)

Lahendus

<a href="javascript:void(0);" onclick="onClickLink('xxx'); tagasi false; "> minna uude asukohta </ a>

Kui sa midagi lihtsaid vastuseid, palun tehke kirjutada kommentaar. See on tõesti appretiated, ma võin kihla vedada, mida paljud!

Kui teil on kirjalikult CSS jaoks aega, siis oleks kogeda need ajad, kui sa sõna otseses mõttes tõmmata oma juukseid, kui teie CSS paigutust vaatas trahvi kõik uued brauserid (ma mõtlen brauserid hiljem kui IE6), aga IE 6 viskab pahur tuju. Sa võitlus raske muuta oma CSS aga see ei tööta ... Noh! Proovige Need Hacks ...

1. Alljoon Hack: -
Definitsiooni järgi CSS 2,1 spetsifikatsioon võimaldab alakriips ("_") CSS tunnused. Kuid paljud brauserid ikka tundub, et ignoreerida tuvastab jätkas alakriips kuid IE. See IE bug / funktsioon saab seega väga selge võimalus määrata CSS omadused te ainult. Seega pidage meeles, CSS vara kirjutatud alljoon start on nähtav Internet Explorer (kõik versioonid, kuid IE 7)

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

Vaata tõend sellest alakriips hack

Ka min-height hack jaoks IE6 kasutab alakriips hack, vaadake

2. Hash (#) Hack: -
Nagu alakriips hack, see on liiga on IES oly, hea vahe, vara tunnuste eelne # start on nähtav kõigile IE versioone, IE7 hulka ja on nähtamatu muul standard brauser.

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

See hack on kasutatud kenasti näidata rist brauser vertikaalne viia lahendus, on pilk see artikkel leida meie rohkem

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

Need hacks tundub taevasse saata, kui midagi toimib ... Kui mõni neist hacks säästab teie elu kunagi, Ära unusta, et kohelda mind kohvi :)

Mul oli see probleem siis, kui teil oleks mouse üritus rajoon (DIV) ja et jaotus mingil mõjuval põhjusel pidi olema läbipaistev (nagu minu juhtumi puhul, kui oli vaja näidata mõned sildid üle pilt mouse of see läbipaistev osa), IE ei suutnud käivitada mouse sündmus (töötas trahvi Firefox).

Proovinud mitmeid võimalusi ... millest paljud oli lihtsalt meeleheitlik katse saada korral tulekahju IE. Üks mõistlik need, et ma arvasin võiks töötada oli seada taustavärvi jaotust ning määrata suitsususe nulli ... Noh! varal töö!

Lõplik lahendus, mis tundus, et töötada ja ei häiri funktsionaalsus mul vaja oli panna 1 pixel korrata / läbipaistev taustapilt selle jaotus

... Silly! kuid nüüd IE näib õnnelik.

Simple ... Probleemi lahendamiseks kasutatakse kuva: inline.

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

Kui teil on paisati element nagu div ja paned margin-right või margin-vasakule, et element, Internet Explorer 6,0 kahekordistub et marginaali väärtus, messing up html / css layout. Määrata see lihtsalt lisada kuva: inline; oma ujuv element.