Ki ga izraža

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.

Saj ne, da obstaja le malo Lightbox-jev, ki jih lahko najdete, ko google. Vprašanje z večino lightboxes da sem našel je bilo, da vse je zdelo, da uporabljajo eno ali drugih težkih okvire JavaScript teže, kot so jQuery, prototip, MOOTOOLS in podobno. Vsi so kul in šopirjenje videti. Toda, če vaša zahteva je, "A rad preprosto in Lahka pošta scenarij svojem mestu", potem je tukaj;

Nekaj ​​lepih lastnosti tega Lightbox

1. Zelo lahka
   a. 4KB skriptov, ko pakirane (8 kb razpakirati)
   b. 2 kb CSS
   c. Nekaj ​​vrstic HTML za posodo pošta
2. Enostavno razumeti in izvajati
3. Imajo lahko več Lightboxes na isti strani.
4. Enako Lightbox Posoda se uporablja za prikaz, drugačno vsebino, ki je vključena kot ločeno skrite delitve na stran), odvisno od povezave / opcije, ki je kliknil.
5. Samodejno centrov, ob upoštevanju vseh dejavnikov, kot so, višino in širino Window (ločljivost zaslona), stran se pomaknite znesek, višina vsebine Lightbox
6. Testiran v IE 7 in FF

Poglej Demo |
Prenesite Lightbox Vir Zip (Downloaded 1724 krat)

jo.js in jo_pack.js [pakirani version]: - preprosto množica objektov JavaScript [UL], ki vsebuje elementov, ki okno in skripte položaja dokumentov. Odprete lahko JO.JS, če želite, da bi dobili vaše roke umazane z nekaj Napredno Javascripting, ustvarjanje abstraktnih nalog, razširitev lastnosti elementov in take. Če ni preveč v Javascripting, ga pusti pri miru.

lightbox.js, lightbox_pack.js [zapakirane version]: - Vsebuje svetlobne skripte manager polje. Če ste stran oblikovalec, odgovoren tudi z izvajanjem osebni album na strani, morate razumeti LightBoxManager. LightBoxManager v bistvu vsebuje le dve funkciji showLightBox in closeLightBox.

lightbox.css: - če veste, CSS, lahko igral s lightbox.css, da prilagodite videz-n-počutili lightbox.css

index.html: Vzorec izvajanje Lightbox z dveh različnih vsebin

lb_underlay_bkg.png: - To je lahka / podob pregledno sliko, ki se uporablja ozadje za podlogo pošta [podlogo plast pod lighbox, ki preprečuje uporabniku, s klikom na katero koli drugo osebo, na strani, medtem ko je odprt Lightbox]. Uporabite lahko katero koli sliko ali celo trdne barve za ta namen, odvisno od strani design in zahteve.

icon_lb_close.gif: - slike za tesno ročaj pošta v zgornjem desnem kotu svetlobe polje. Lahko uporabite katero koli sliko, kot vsak model

Poglej Demo |
Prenesite Lightbox Vir Zip (Downloaded 1724 krat)

Prosimo vas, da nam je vaše komentarje in povratne informacije ...

Ta objava je lahko dober primer za izraz "Poučevanje babica sesati jajca" ... Ker to je samo BASIC CSS Stuff. Toda za tiste, tako kot mene pozablja, to je lahko blagoslov v preobleki. Vedno sem mislil (sem lahko izgubi svoje delo za to rekel), je bilo mogoče, da bo nekaj del HTML vsebino strani statični (kar pomeni, njeno stališče ostaja, KOT SO na zvitka Window), z nekaj pametne skripte, delaš vse tiste znanstvene izračuni, da bi našli dinamično mesto, pastmi Window.scroll dogodkov in nastavitev časovne omejitve itd

Nikoli mislil, bi to tako enostavno, kot je to .... Tu v nadaljevanju CSS / HTML, imam štiri statične bloke, eno pritrdijo na vsako extrimities strani, TOP, desno, spodaj in levo ... da ne govorimo ... lahko izberete eno ali več, če je treba ...

CSS
. Statična {zaslon: blok, z-indeks: 10; color: # FFFFFF; overflow-x: skrito; overflow-y: skrito, lega: ixed;
}
Napake # vsebina {kritja: 100 pik 150px 160px 0px; meja: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66, širina: 100%, višina: 55px;}

# Wrap-l {top: 80px; background: # FF9966, višina: 300px; širina: 150px; meja: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px; background: # 3333CC, širina: 100%, višina: 55px;}

# Wrap-r {top: 80px; background: # 6666FF; višina: 300px; širina: 140px; meja: 2px solid # e6e6e6, desno: 0;}

HTML
<div id="contents"> Vi glavna vsebina strani </ p>
<div id="wrap-b" class="static">
Statična vsebina na dnu strani
</ P>
<div id="wrap-t" class="static">
Statična vsebina na vrh strani
</ P>

<div id="wrap-l" class="static">
Statična vsebina na strani levo
</ P>
<div id="wrap-r" class="static">
Statična vsebina na desni strani
</ P>

Ogled wroking vzorec tukaj

Veliko krat smo se čutijo potrebo, da napišete brskalnika specfic hacks (čeprav to ni dobra praksa, smo UI razvijalci morali zateči k te zlo do velikih brskalnikih Wars prihaja na premirje). Pred tem sem že omenil v tem članku Za vašo IES Samo , kako napisati odlomek CSS, ki bi bila vidna v IE brskalnikih <IE7 samo.

Včeraj sem imel primer, kjer sem hotel napisati nekaj posebnega FireFox odrezke CSS. No! Nisem prepričan, če je koda CSS za to pa je HTML. Obstaja ulov Čeprav je ta kos HTML doesnot potrditve pass HTML. Ampak, anywaz! Če si zaljubljen slabo ali kot tako, ne-pozdrav za potrjevanje (včasih moramo biti kruto), lahko uporabite naslednje prijaviti povezavo do le slogovne FF ali celo samo kodiranje CSS v tem bloku. Koda je

<comment> Daj samo za Firefox html / css / scripts tukaj </ komentar>

npr.
<comment>
<style>
/ * Slogi za FF samo * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Komentar>

I "m srečen za trenutek ...

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!

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

Ko sem prebral ta članek na seznamu, ki poleg " Faux Absolute položaja
Eric Sol ", mi ni bilo nič manj kot navdušena. Bil sem tako depresiven Majorly, povzroči, pošteno sem se spraševala, zakaj vekanje sem prišel do nekaj čudovito, kot je ta.

Ponavadi, ko smo ustvarili CSS postavitev, ki jih uporabljamo v položaj "ali" lebdi "ali zelo slabo kombinacijo obojega. Eric Sol in njegova ekipa opredeli poleg odlično tehniko novega tipa postavitve tehnike CSS, ki so jo krstili kot "umetno Absolute pozicijsko" po umetno tehniko stolpcev, ki simulira prisotnost stolpca.

Saj veš, da je problem vseh nas CSS razvijalci imeli z razpadajoči postavitvami (The nepričakovane vsebine sprememb, ki povzročajo celotne stolpce zaviti, ko jih uporabljamo v zraku postavitve) ... No! Zdi se zgodovina!!
Ta postavitev tehnika je še zelo mlad, in ga je pospravila, ki jih vseh teh gurujev CSS tam, preden postane un napisal standard. Vesel sem, da jo uporabljajo ZDAJ! ... In sem že v sredini pretvorbo moje prej problematičnih / plavajoči ne-nujno tudi postavitev v postavitev FAP že ... in sem vesel, da pravijo, da "smo se že uporabljajo faux Absolute umeščanja tega spletnega dnevnika, pa tudi" ... GO poskusiti, ZDAJ!

Slava Eric!

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

Postavite slogovne na vrh

Če želite stran, da se postopoma naložiti, da želimo, da brskalnik za prikaz ne glede na vsebino ima čim prej, dal CSS na vrhu strani v dokumentu glavo. To pomeni, strani se zdi, da nakladanje hitreje, kot to omogoča postopno vračanje strani. To je še posebej pomembno za strani z veliko vsebine in za uporabnike na počasnejših internetnih povezavah.

To je dokumentirano dejstvo, da bi povečali splošno uporabniško izkušnjo, je pomembno, da se kazalniki napredka in vizualne odzive. Da ne bi bilo, da izvlečete elemente strani, v primeru, če je njihova stili spremembe, nekateri brskalniki, vključno z IE, bloki upodabljanja strani, dokler se CSS polni obremenitvi. Zaradi tega, uporabnik dobi videti prazno belo stran.

V W3 HTML specifikacije "tudi določa, da mora CSS me vključujejo v glavi delu strani HTML. at the bottom of the page, so it's best not to use it. Upoštevajte tudi, da je v IE @import obnaša enako kot z <link> na dnu strani, zato je najbolje, da ga ne uporabljajo.

Izogibajte se uporabi brskalnika posebnosti

Filtri: Uporaba filtra poveča porabo pomnilnika in se uporablja na element, ki niso na sliki, tako da je problem se množi. Prav tako so Filtri IE lastniška, zato ne bo delovala kot je bilo predvideno v drugih brskalnikih. Če želite pregledne ali gradient ozadja, uporabite 1Pixel s slikami.
Izrazi: CSS izrazi so lepo lastnost, da imajo v CSS, še vedno pa je IE posebnost. Prav tako je pomembno opozoriti, da so ti izrazi so oceniti, če je stran postali in spreminjati, zvitek in tudi, ko uporabnik premakne miško preko strani. Ni treba posebej poudarjati to lahko vpliva na delovanje vaše strani. Zato v preprostih besedah, ne uporabljajte CSS izrazov, če menite, da njegove prednosti "tehta več kot njegovi cons"

Zunanje strukture vam CSS

Uporaba zunanjega CSS bo imelo za posledico hitrejše nalaganje Strani saj JavaScript in CSS datoteke shranjene s strani brskalnika. Inline CSS v dokumentih HTML dobili prenesli vsakič, ko je dokument HTML je zahteval. To bi dejansko zmanjšalo število zahtev HTTP, nato se poveča velikost HTML dokumenta. Zunanji CSS so cached s strani brskalnika, velikost dokumenta HTML se zmanjša, ne da bi povečanje števila zahtev HTTP.

Prosimo, upoštevajte, da se, če uporabniki na vašo spletno stran, imajo več pogledov strani na seji in veliko vaših straneh, ponovno uporabljajo enake skripte in slogi, obstaja večja možnost koristi od zunanjih predpomnilniku datotek.

Pack vaše CSS datoteke

Pakiranje ali škrtanje svoj CSS je praksa odpravo nepotrebnih znakov s kodo zmanjšati njegovo velikost s čimer se izboljša obremenitve krat.

CSS mi lahko crunched z odstranitvijo vse komentarje in vse neželene znake, kot belih lis, novih vrstic itd

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