2008 10. oktober 2008

NE Za samo za IE - CSS selektorji Otrok ne dela v IE

CSS za Non-IE brskalniki: Njena ni novic za razvijalce CSS, da CSS selektorji Child, kot je na primer spodaj, ne zdi, da dela v IE.

npr div> span {nekaj css}, to pomeni, da "ko span element je otrok (in ne vnuk ali super grand otrok itd) ob delitvi elementa".

Ampak smo to konvencijo v našo korist. V preteklosti je bil otrok selektor uporablja za skrivanje CSS ukazov od IE. Preprosto z dajanjem html>body se bo pred vsako CSS ukaz IE prezreti:

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

To deluje, ker <body> je vedno otrok <html> - to seveda ne more biti nikoli vnuk ali pra-vnuk od <html> .

Zdaj, ko IE 7 razume otrok izbiro, boste morali vstaviti prazno oznako komentarjev, v neposredno po več kot znak IE 7 pa ne bo razumel to izbiro (kdo ve zakaj!?) In bo zato v celoti prezreti ta ukaz CSS.:

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

Če še niste videli to prej, imajo preberete tudi naslednje


2008 4. oktober 2008

Izginjajo HTML / DIV elementi v Internet Explorerju [IE]

Kot ponavadi, eden od mnogih nekaj čudnih težav z IE in to treba je uvršča v TOP 10 IE quirks.

PROBLEM IZJAVA (To je bil moj problem, morda imate podobne misbehaviors):
Imam veliko DIV je na stran z razreda "sectionhead", ki je nič drugega kot naslov odseka na strani. Tako sem nekaj stil videti takole

. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}

Div je svetlo sivo bar z nekaj črno besedilo. Kaj se zgodi v IE, je nekatere od teh odsekov glave so prikazani v redu, nekateri pa so nevidni, dokler se pomikate po strani ali pa kliknite na nekaj strani, itd Včasih se nagibajo k izginili, ko boste kliknili na tipko »Alt želiš, ko stran navzdol ali se pomaknite z drsnega traku. Včasih se zdi, da znova pojavijo, ko osvežite (F5) strani. Skratka sem popolnoma preprosta DIV z nekaj preprostega stila obnaša BAD.
Kaj bi lahko povzročilo takšno nenadzorovano vedenje? No! Odkrito povedano, pojma nima!

MOŽNA REŠITEV:
Še enkrat, ne sprašuj me zakaj, ampak v veliko primerih ta problem ponavadi izginejo, ko dodate položaj: v primerjavi z MIS z vedenjem elementov slog, kot to

. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; položaj: relativna}

Čudno, ampak kaj naj rečem? Bog me je Bless od IE!

IN DO DELEŽ z nami, če bi imeli podobne težave.


2008 15. julij 2008

IE 8 strog način in CSS opacity ... izognete

Oh No! V prejšnji post nekaj dni nazaj glede motnosti v IE8, sem pozabil omeniti pomembno točko, da "IE 8 strog način ne dopušča CSS motnosti".
Za tiste, ki donot razumeli, kaj mislim s strogim načinom, tukaj je hiter tutorial .

Delo okoli, da je to (pred ekipo IE dev zavedajo, da so utrli pot za rutino ponovno dela po vsem svetu, na spletnih straneh, ki uporabljajo Pop-up lightboxes z nekaj motnosti, in dal nazaj podpore za motnost) je, da uporabite pol pregledno sliko ... po možnosti v formatu PNG (sem imel slabe izkušnje dobili prosojne slike GIF na delo, saj so bili naj bi). Ustvarite sliko PNG za barve in odstotek preglednosti ti je všeč, v tebi najljubši urejevalnik slik in jo uporabite kot ozadje za svoj osebni album prekrivni.

tj
Namesto da bi kaj takega

. Lighbox_overlay {
Ozadje-color: # FFFFFF;
z-indeks: 1001;
-Moz-opacity: 0,6;
motnost: 0,60;
filter: alpha (opacity = 60);
}

Ali je to ....

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

Če želite poskusiti, KLIKNITE TUKAJ! | NA PRENOS, KLIKNITE TUKAJ!


2008 6. julij 2008

Ne "Prosojnost" v IE8

Č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!


2008 20. junij 2008

Bela Vesolje Bug v postavk / Seznam (li) v IE6

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

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


2008 12 april 2008

CSS Cross Browser Minimalna višina Hack

Objavi IE 6, je MSIE že tako prijazen, da nam UI razvijalci z dodatkom nekaj več CSS lastnosti standardnih za večino drugih standardnih brskalnikih. Ena taka uporabna nepremičnina "min-višine". Lepo naravnost naprej premoženje, ki ne potrebuje dolgo daha pojasnilo. Ko je nastavljena min-višina za delitev, je vedno ohranja to nastavljeno višino, ko vsebina je v njem zaseda manj kot lahko ima in pomembno je (za razliko od navadnega vanilije "Višina" lastnine) lestvice ali z besedami, CSS, da se vede kot delitev, katerih "Višina" nastavljen na "auto" ...

Za nekatere od nas revnih razvijalcev, ki so še vedno potrebni za kode CSS, da mora prav tako delajo v IE6, bi lahko un-dostopnost "min-višina", dokazati kažejo zamašek nekje ... donot obup.

Na srečo imamo dovolj quirks v IE, ki bi jih uporabljamo v korist ven in kramp našo pot skozi, da dosežejo svoj ​​cilj ... to je, da je delitev delitev, kot da njegova min-višina v IE6

Rešitev 1: Uporaba poudarjajo Hack [ ... Preberi več ]

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

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


Rešitev 2: Uporaba atributa CSS Selector 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>

Atribut CSS Selector Hack izkorišča dejstvo, da brskalniki prej tha IE6 prezreti tudi atribute, izbiro. Bodite pozorni na zahtevo po drugi posodi delitve z class = "someclass". Samo presense razrednega atributa za to delitev, preglasi višine nazaj v avto za Opera, Mozilla in MSIE7 in kasneje. IE6, ki ne podpira atribute selektorji, ga ignorira.

Oglejte si demo min-višina kramp za IE6



2008 15. marec 2008

Draži Izberite Škatle viden skozi pojavnem oddelkov

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!


2008 8. januar 2008

Pogojni Komentarji: Za vašo IES Le-dela Duex

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


2007 8. september 2007

Za vašo IES Only

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


2007 12 julij 2007

Mouseover dogodek na pregleden delitve v IE

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.


NDK domov | Ki ga izraža | Izražanje Okus | Izražanje Penmenship | Izražanje Awe | Izražanje Sebe