Išreikšdami IT

Kaip įprasta, vienas iš daugelio keistų problemų su IE ir tai vienas misą gretas Top 10 IE Photoshop.

PROBLEMA ATASKAITA (Tai buvo mano problema, gal turite panašių misbehaviors):
Turiu daug DIV tai su klasės "sectionhead", puslapyje, kuriame yra nieko, bet pavadinimas puslapyje skyriuje. Taigi aš kai stilius atrodo taip

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

Div šviesiai pilka juosta su kai juodu tekstu. Kas nutinka, IE, yra kai kurie iš šių skyrių antraštėse rodomi ok, bet kai kurie yra nematomi, kol jūs slinkite puslapį arba spustelėkite ką nors puslapio ir pan. Kartais jie linkę dingti, kai paspausite 'Alt "klavišą, kai jūs puslapis arba slinkti su slinkties juostos. Kartais atrodo, kad vėl atsiras, kai perkrauti (F5) puslapį. Aš trumpas visiškai paprastas DIV su paprasta stiliaus elgiasi blogai.
Kas galėtų sukelti tokį chaotiškai elgesį? Gerai! Atvirai kalbant, ne idėja!

GALIMI SPRENDIMO:
Nepakanka paklausti manęs kodėl, tačiau daugeliu atvejų ši problema paprastai išnyksta, jei norite pridėti poziciją: palyginti su IVS elgiasi elementų stilių, kaip tai

. Sectionhead {font-size: 18px; fonas: # cfcfcf; padding: 5px; padėtis: santykinis}

Keista, bet ką pasakyti? Dievaži iš IE!

IR DO Pasidalink su JAV, jei turite panašių problemų.

Ne todėl, kad yra tik keletas švieslentė, kad jūs galite rasti, kai jūs google. Su dauguma švieslentes, kad aš rasiu problema buvo ta, kad jie visi atrodė, kad naudoti vieną ar kitų sunkiųjų svorio JavaScript bazės, pavyzdžiui, JQuery, prototipas MooTools ir pan. Jie visi yra kietas ir swanky ieškote. Bet jeigu jūsų reikalavimas yra "Bet aš noriu paprastas ir lengvas švieslentės Mano svetainė" scenarijų, tada čia yra;

Keletas naudingų funkcijų šio švieslentę

1. Labai lengvas
   a. 4KB scenarijų, kai supakuotiems 8 KiB išpakuota)
   b. 2 kb CSS
   c. Keletas eilučių HTML švieslentės konteinerį
2. Paprasta suprasti ir įgyvendinti
3. Gali turėti keletą švieslentes tame pačiame puslapyje.
4. Pats švieslentę konteineris yra naudojamas norint parodyti kitokį turinį, kuris yra atskirai įtrauktos kaip paslėptų padalinių puslapio), priklausomai nuo to, kad yra paspaudėte nuorodą / option.
5. Automatiškai centrų, atsižvelgiant į visus veiksnius, pvz., Lango aukštis ir plotis ekrano skiriamoji geba), puslapio slinkties suma ir švieslentę turinį aukštį
6. Išbandyta 7 IE ir FF

Žiūrėti Demo |
Parsisiųsti švieslentė Šaltinis Pašto (Siuntėsi 1813 kartus)

jo.js, jo_pack.js [supakuoti versija]: - objektai Javascript paprastas nustatyti [: JO], kuriame yra elementas, langą ir dokumentų padėties scenarijus. Jūs gali atidaryti JO.JS, jei norite gauti savo rankas purvinas su kai kurių pažangių Javascripting, kuriant abstrakčias funkcijas, išplečiant elementų savybės ir tokių. Jei jūs ne per daug, Javascripting Palikite jį ramybėje.

lightbox.js, lightbox_pack.js [supakuotas versija]: - šviesos dėžės menedžeris scenarijus. Jei esate projektuotojas, taip pat atsakingas įgyvendinimo švieslentę puslapyje, jums reikia suprasti LightBoxManager. LightBoxManager iš esmės yra tik dvi funkcijos showLightBox ir closeLightBox.

lightbox.css: - Jei žinote, CSS, galite pažaisti su lightbox.css pritaikyti išvaizdos n--jaustis lightbox.css,

index.html: pavyzdys su dviem skirtingo turinio švieslentę įgyvendinimas

lb_underlay_bkg.png: - Tai lengvas / Simi skaidrus vaizdas, kuris yra naudojamas švieslentės dangą fonas [Pagrindas yra žemiau į lighbox, sluoksnis, kuris apsaugo vartotoją spustelėdami bet kurio kito subjekto puslapyje, o švieslentę yra atvira]. Galite naudoti bet kokį atvaizdą ar net kietas spalvų šiam tikslui, priklausomai nuo puslapio dizaino ir reikalavimo.

icon_lb_close.gif: - glaudžiai švieslentės rankena įvaizdis šviesos lango viršuje, dešinėje. Galima naudoti bet kokį vaizdą kaip už dizainą

Žiūrėti Demo |
Parsisiųsti švieslentė Šaltinis Pašto (Siuntėsi 1813 kartus)

Prašome leiskite mums turėti savo komentarus ir atsiliepimus ...

Šis pranešimas gali būti geras pavyzdys frazė "Mokymo močiutė čiulpia kiaušinius" ... Priežastis tiesiog PAGRINDINIS CSS Daiktai. Bet tiems, kaip pamiršo mane, tai gali būti persirengęs palaiminimas. Aš visada maniau (aš galėtų prarasti savo darbą, sakydamas tai), tai buvo tik įmanoma išlaikyti šiek tiek HTML puslapio turinio STATINIAI dalį reikšmė, jo pozicija lieka KAIP YRA Window Scroll), naudojant kai kurių protingas scenarijus, Daro visi tie, mokslo skaičiavimai rasti dinamišką poziciją, gaudymas spąstais Window.scroll įvykius ir nustatant pertraukas ir tt

Niekada maniau, kad galėtų būti taip paprasta, kaip .... Čia, CSS / HTML, esantį žemiau, turiu keturis statinės blokų, vienas, pritvirtintas prie kiekvienos puslapio extrimities,, TOP, dešinės, apačios ir kairės ... Nereikia nė sakyti ... galite pasirinkti bet kurio iš jų ar daugiau, jei reikia būti ...

CSS
Statinis {kalbomis: blokas, z-index: 10; spalva: # FFFFFF; overflow-x: paslėptas; perpildymo Y: paslėptas; padėtis: ixed;
}
# Turinys {margin: 100px 150 vaizdo elementų 0px 160px; border: 1px solid # e6e6e6}

# Wrap-t {viršų: 0px background: # 33CC66; plotis: 100%, aukštis: 55 taškų;}

# Wrap-l {top: 80px; background: # FF9966; aukštis: 300px; plotis - 150 vaizdo elementų; siena: 2px kietas # e6e6e6;}

# Wrap-b {apačioje: 0px; fonas: # 3333CC, plotis: 100%, aukštis: 55 taškų;}

# Wrap-r {top: 80px; background: # 6666FF; aukštis: 300px; Plotis: 140px; siena: 2px kietas # e6e6e6; teisę: 0;}

HTML
<div id="contents"> titulinis turinys </ div>
<div id="wrap-b" class="static">
Puslapio apačioje Statiškas Turinys
</ Div>
<div id="wrap-t" class="static">
Statiškas Turinys Page Į viršų
</ Div>

<div id="wrap-l" class="static">
Statiškas Turinys Page paliko
</ Div>
<div id="wrap-r" class="static">
Statiškas Turinys puslapio dešinėje
</ Div>

Peržiūrėti wroking mėginį čia

Daug kartų mes tikime, kad reikia parašyti naršyklės specfic hacks (nors tai nėra gera praktika, mes UI kūrėjai turi imtis tokių blogybių iki didžiųjų naršyklių karų ateina paliaubų). Anksčiau buvo minėta šiame straipsnyje, savo IES tik , kaip parašyti CSS kodo fragmentą, kad būtų matoma <IE7 tik IE naršyklėmis.

Vakar turėjau atvejį, kai aš norėjau parašyti šiek tiek Firefox specifinę CSS fragmentus. Gerai! Aš nesu įsitikinęs, jei yra CSS kodas, bet yra HTML Yra sugavimo Nors, šis HTML doesnot pass HTML patvirtinimo aktas. Tačiau, anywaz! Jei jūs negalite išeiti blogai ar kaip, pavyzdžiui, neturi-linkėjimus Įteisinimas (kažkada mes turime būti žiaurus), galite naudoti šiuos paskelbti nuorodą į FF tik stilių ar net tiesiog kodas CSS per šio bloko. Kodas

<comment> Įdėkite savo "Firefox" tik html / css / Skriptai čia </ comment>

pvz.
<comment>
<style>
/ * Stiliai tik FF * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Komentaras>

Aš laimingas metu ...

Oh well! Ankstesnio posto kelias dienas atgal dėl drumstumas, IE8, aš pamiršau paminėti svarbų dalyką, kad "IE 8 griežtas režimas neleidžia CSS neskaidrumo".
Tiems, kurie donot suprasti, ką reiškia griežtą režimą, čia yra greitas pamoka .

Aplink tai darbas (Prieš IE Dev Team suvokti, kad jie nutiesė kelią visame pasaulyje naujo darbo rutiną, interneto svetaines naudojant Pop-up švieslentes su tam tikru neskaidrumo ir įdėti atgal neskaidrumo paramą) yra naudoti pusiau skaidrus vaizdas ... pageidautina PNG formatu (turėjau blogos patirties, gauti skaidrius GIF vaizdus dirbti, nes jie turėjo). Sukurti PNG skaidrumo jums patinka spalva ir procentinę dalį, jūsų mėgstamą vaizdo redaktorių ir naudoti jį kaip fono paveikslėlį Jūsų švieslentės perdangą.

ty
Vietoj to, kad kažkas panašaus į tai

. Lighbox_overlay {
background-color: # FFFFFF;
Z-index: 1001;
-MOZ-opacity: 0.6;
drumstumas: 0,60;
filtras: alpha (opacity = 60);
}

Ar tai ....

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

Norėdami išbandyti, spustelėkite čia! | Norėdami atsisiųsti, spauskite ČIA!

Jei peržiūrite šį puslapį IE8, tada jums reikia matyti visiškai nepermatomas baltas fonas už šį pranešimą. Vakar, mano kolegos pažymėjo this out man (aš esu vienas iš tų žmonių, kurie prisitaiko prie pokyčių lėtai ir nuolat ... ypač naršyklių. Gali pasakyti, Im bailys, bet todėl, kad .... Būdamas UI "kūrėjas, aš visada šūdas naujų naršyklės versijų bijo ... žinote ką Im tlaking apie,, tiesa?)

Aptvėrė maždaug už laiką, bando rasti išeitį, siekiant ją išspręsti, ir kas tada ...
Šį kartą mūsų Visada Mėgstamiausias naršyklė padarė viską vėl nuleisti visą paramą CSS neskaidrumo. Nestandartiniai "filtras: alfa (drumstumas = # #)" CSS atributas buvo pašalintas, Nica, tačiau jie taip pat visiškai pamiršo pridėti css3 neskaidrumo paramą (pvz., kaip visa kita naršyklė manimi gražiai išlaikė jį). Taigi, pirmą kartą, nes Dievas mums papasakojo apie CSS neskaidrumo nuo IE 5.0, I guess), naršyklė nepalaiko CSS neskaidrumą.
O dabar ant viršaus kremo: Oficialus žodis iš IE 8 komandos? Tai "dizainas" ir "Mes svarstysime apie tai būsimos versijos IE".

PS: Išbandykite šį puslapį FF, prisiekiu, kad, atrodo tvarkingas!

Kai aš perskaičiau šį straipsnį A List Apart " Faux Absoliutus padėties nustatymo
Eric Sol ", man buvo ne mažiau nei sužavėtas. Aš taip pat buvo sumažintos majorly, sukelti, sąžiningai man buvo įdomu, kodėl cant i sugalvoti kažką Pasakų, kaip šis.

Paprastai, kai mes sukurti CSS išdėstymai, mes naudojame "pozicija" arba "PLŪDŽIŲ", arba labai blogas derinys tiek. Eric Sol ir jo komanda apibrėžti naujo tipo CSS išdėstymo techniką, kurią jie pakrikštijo kaip "dirbtiniais Absolute Positioning" po dirbtiniais stulpeliai techniką, kuri imituoja stulpelyje buvimą šalia puikią techniką.

Jūs žinote, kad problema, visi iš mūsų CSS kūrėjai su Yrančių maketai netikėto turinio pokyčius, kurie sukelia visą stulpelius plėvele, kai mes naudojame Paskelbtų maketai) ... Na! Atrodo istorija!!
Šis išdėstymas technika vis dar yra labai jaunas, ir į šiukšlinę visų šių CSS guru ten, kol ji tampa JT parašyta standartas. Aš esu laimingas, kad naudoti ją dabar! <...> Ir jau esu į viduryje konvertuoti savo anksčiau probleminius / kintančios JT būtinai maketus į FAP išdėstymo jau ... ir džiaugiuosi pasakyti, "mes jau naudojate dirbtiniais Absolute Padėties šio dienoraščio svetainėje, taip pat" ... GO išbandyti, DABAR!

Kudos Eric!!

Jei kada nors ar padarydami vieną) Vertikalus meniu sąrašo elementus (LI) žodžius ir CSS, galite susidurti, tai dar viena klaida Internet Explorer, ty 6 įterpia šios spragos tarp sąrašo elementų, kuriuose yra bendrosios lygio elementus, ty jei yra bet koks tarpus tarp sąrašo elementų žymėjimas. Ačiū, bet ne ačiū, IE 7 versija, atrodo, iš šios klaidos.
Jei patiko man, ir daug daugiau, jums priklauso šio nusivylė kūrėjų, kurie vis dar turi gauti savo naujus išdėstymus, darbo IE6 juosta, tada tai gali būti naudinga. Pažvelkite ...

Bandomasis žymėjimas:

<ul id="menu">
<li> <a href="#"> Pradžia </ a> </ li>
<li> <a href="#"> Apie </ a> </ li>
<li> <a href="#"> Paslaugos </ a> </ li>
<li> <a href="#"> Portfelio </ a> </ li>
<li> <a href="#"> DUK </ a> </ li>
<li> <a href="#"> Kontaktai </ a> </ li>
</ Ul>

Galite sukurti šiek tiek CSS, panašus į vieną žemiau, aukščiau žymėjimą transfrom ją pastatyti į vertikalią meniu ....

Pavyzdys CSS ...
# Meniu {
margin: 0; padding: 0; fonas: # FF9900;
list-style-tipas: none; plotis: 150 vaizdo elementų;
}
# Meniu li {margin: 0; padding: 0;}
# Meniu {display: blokinis;
spalva: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Rezultatai pamatysite ...

Sprendimas dėl šios klaidos ... (pakeistas / pridėti CSS pusjuodžiu kursyvu)

# Meniu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; plotis: 150 vaizdo elementų;
float: left; / * tai yra Paskelbtų sąrašo elementus * /
}
# Meniu li {
margin: 0; padding: 0;
float: left; / * Tai nustato * /
plotis: 100%; / * tarpus klaida IE6 * /
}
# Meniu {
kalbomis: blokas; color: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Jei virš sprendimas doesnot atrodo dirbti (IE6 tik žinomų priežasčių), ... pabandykite šį metodą, o ne

Tiesiog pridėkite šiuos papildomus IE6 tik stilius žymėjimą ...

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

Įdėkite Stylesheets viršų

Jei norite puslapį įkelti palaipsniui, tai yra, mes norime naršyklę rodyti, bet turinys turi kuo greičiau, CSS dokumento HEAD viduje puslapio viršuje. Tai daro, puslapiai atrodo pakrovimo greičiau, nes tai palengvina palaipsniui suteikimo puslapio. Tai ypač svarbu, puslapių su daug turinio ir vartotojų wolniejszych interneto ryšio.

Tai yra dokumentuotas faktas, kad siekiant padidinti bendrą vartotojų patirtį, svarbu pateikti pažangos rodiklius ir vaizdo Atsiliepimai. Siekiant išvengti perbraižyti puslapio elementus, jei jų stilių kaita, kai kurios naršyklės, įskaitant IE, blokai utilizavimo puslapio, kol CSS pilnai pakrautas. Dėl to, vartotojas gali matyti tuščias baltas puslapis.

W3 HTML Specifikacijoje taip pat teigiama, kad CPT turi mane įtraukti į HTML puslapį HEAD skyriuje. at the bottom of the page, so it's best not to use it. Taip pat atkreipkite dėmesį, kad IE @import elgiasi pats kaip naudojant <link> puslapio apačioje, todėl geriau jo nenaudoti.

Venkite naudojantis naršykle ypatumus

Filtrai: Naudokite skirtų filtrų padidina atminties vartojimą ir už kiekvieną elementą, o ne už įvaizdį, todėl problema yra dauginama. Be to, Filtrai IE Patentuotas, todėl bus neveikti taip, kaip numatyta kitų naršyklių. Jei norite skaidrius arba gradientas fonas, naudokite 1Pixel su nuotraukomis.
Išraiškos: CSS išsireiškimai yra gražus bruožas turėti CSS, bet vis dar yra IE ypatumas. Be to, svarbu pažymėti, kad šios išraiškos yra įvertinti puslapio vaizdas ir jo dydis, przewijany ir net kai vartotojas pajudina pelę puslapio. Nereikia nė sakyti, tai gali paveikti jūsų puslapio veikimą. Taigi Paprastais žodžiais tariant, Venkite CSS išraiškos, jeigu manote, kad, jo privalumai "sveria daugiau nei jos trūkumus"

Išorę jums CSS

Naudojant išorinį CSS bus greičiau pakrovimo puslapius, nes JavaScript ir CSS failų talpyklos naršyklės. Inline CSS HTML dokumentų siųstis HTML dokumentas yra prašoma kiekvieną kartą. Tai iš tiesų gali sumažinti skaičių HTTP prašymus, tačiau vėliau padidėja HTML dokumento dydį. Išorės CSS talpyklos naršyklės HTML dokumento dydis sumažinamas nedidinant HTTP užklausas.

Atkreipkite dėmesį, kad, jei jūsų svetainės vartotojai turi keletą puslapių peržiūrų per sesiją, ir daugelis iš jūsų puslapiuose vėl naudoti tie patys scenarijai ir stilių, yra didesnė nauda iš talpyklos išorinius failus.

Pakuotės savo CSS failą

Pakavimo ir crunching savo CSS pašalinti nereikalingus simbolius iš kodą sumažinti jos dydį ir taip pagerinti apkrovos metu praktika.

CSS gali mane krizės paliestose pašalinant visus komentarus ir nereikalingus simbolius, pavyzdžiui, baltųjų erdvių, naujas eilutes ir tt

Standartinė IE 6, MSIE buvo natūra Pakanka mus UI kūrėjams pridedant keletą CSS daugumai kitų standartinių naršyklių standartines savybes. Viena tokia naudinga "min-aukštis" nuosavybė. Gana važiuoti tiesiai į priekį nuosavybė, nereikia ilgai kalbantis paaiškinimą. Min aukštis skaidymui vykdyti, visada išlaiko tą nustatytą aukštį, kai turinys ji namai užima mažiau nei jis gali turėti ir svarbiausia (skirtingai nuo paprasto vanilės "aukščio" nuosavybė) svarstyklių arba CSS tariant, ji elgiasi kaip padalinys, kurio "Aukštis" yra nustatytas į "auto" ...

Kai kurie iš mūsų skurdžių kūrėjams, kurie vis dar reikalingi kodas CSS, kad taip pat turi dirbti IE6 ir prieinamumas "min-aukštis", gali pasirodyti šou kamštį kažkada ... Donot neviltį.

Laimei, mes turime pakankamai Photoshop IE, kad mes turėtume naudoti iš pranašumo ir nulaužti mūsų būdas pasiekti savo tikslą ... ty skyrius Skyriaus lyg min aukštis IE6

Sprendimas 1: Naudokite pabraukimo Hack [ ... daugiau ]

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

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

---

Sprendimas 2: Naudojant CSS Selector Pavadinimas 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>


CSS charakteristika ieškiklis Hack pasinaudoja tuo, naršyklių anksčiau THA IE6 ignoravo atribute-selector. Atkreipkite dėmesį į reikalavimą kitos konteinerių padalint class = "someclass". Tiesiog klasės atributą šio skyriaus matomumą, yra viršesnis už aukštį auto Opera, Mozilla ir MSIE7 ir vėliau. IE6, kuris nepalaiko atribute selektoriai, jį ignoruoja.

Peržiūrėti Demo min aukštis Hack IE6