Udtrykke det

Som sædvanlig. En af de mange nogle mærkelige problemer med IE, og det må man rangerer i top 10 i IE Quirks

PROBLEM ERKLÆRING (Dette var mit problem, måske du har lignende dårlig opførsel):
Jeg har mange DIV er på siden med klassen "sectionhead", der er intet, men titlen på en sektion på siden. Så jeg har nogle stil ser ud som denne

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

Det div er en lys grå bar med noget sort tekst. Hvad der sker i IE er nogle af disse sektionsoverskrifter vises ok, men nogle er usynlige, indtil du rulle siden eller klik noget på siden osv. Engang de har tendens til at forsvinde, når du klikker på 'alt', når du side ned eller rulle med scroll-bar. De tider synes at igen, når du genindlæse (F5) på siden. Jeg kort ganske enkelt DIV med nogle enkle stil opfører BAD.
Hvad kunne skabe en sådan en uberegnelig adfærd? Nå! Helt ærligt, NO IDEA!

MULIG LØSNING:
Igen spørg mig ikke hvorfor, men i mange tilfælde dette problem tendens til at forsvinde, når du tilføjer position: i forhold til mis opfører elementer stil, som dette

. Sectionhead {font-size: 18px; baggrund: # cfcfcf; padding: 5px; position: relative}

Weird, men hvad jeg skal sige? Gud velsigne mig fra IE!

OG deler med USA, hvis du havde lignende problemer.

Ikke at der kun er et par LightBox s, som du kan finde, når du google. Spørgsmålet med de fleste af de lightboxer, som jeg fandt var, at de alle syntes at bruge den ene eller de andre tunge vægt JAVASCRIPT rammer som jQuery, Prototype, Mootools og lignende. De er alle cool og swanky søger. Men hvis dit krav er "men jeg ønsker en ENKEL OG LET LightBox SCRIPT til min side", så her er det;

Nogle gode funktioner i denne lightbox

1. Meget lys
   en. 4KB af scripts, når pakket (8 kb udpakket)
   b.. 2 kb af CSS
   ca. Par linjer i HTML til lightbox container
2. Nem at forstå og implementere
3. Kan have flere lightboxer på den samme side.
4. Det samme lightbox container bruges til at vise, forskelligt indhold (der er separat indgår som skjulte afdelinger i siden), afhængigt af linket / option, der er klikket.
5. Automatisk centrerer sig, idet der tages hensyn til alle faktorer, såsom vinduets højde og bredde (skærmopløsning), side rulle mængde og højden af ​​indholdet af lightbox
6. Testet i IE 7 og FF

Se demo |
Download Lysbord Kilde Zip (Downloaded 1724 gange)

jo.js og jo_pack.js [pakket version]: - et simpelt sæt af JavaScript-objekter [JO], som indeholder elementer, vindues-og dokument positionering scripts. Du kan åbne JO.JS hvis du ønsker at få dine hænder beskidte med nogle Advanced Javascripting, skaber abstrakte funktioner, der strækker sig element egenskaber og sådan. Hvis du ikke for meget i Javascripting, Lad det alene.

lightbox.js, lightbox_pack.js [pakkede version]: - indeholder Lyserammen manager scripts. Hvis du er sidedesigneren, også er ansvarlig med at gennemføre lightbox på siden, er du nødt til at forstå LightBoxManager. LightBoxManager grundlæggende indeholder kun to funktioner showLightBox og closeLightBox.

lightbox.css: - Hvis du kender CSS, kan du lege med lightbox.css at tilpasse udseendet-n-feel lightbox.css

index.html: Prøve gennemførelse af lightbox med to forskelligt indhold

lb_underlay_bkg.png: - Det er let / simi gennemsigtigt billede, der bruges baggrunden for lightbox underlaget [underlag er laget under lighbox, der forhindrer brugeren i at klikke på en anden enhed på siden, mens lightbox er åben]. Du kan bruge ethvert billede eller en farve til dette formål, afhængigt af sidedesign og krav.

icon_lb_close.gif: - Billedet for tæt lightbox håndtag øverst til højre af lyskassen. Kan bruge et billede pr design

Se demo |
Download Lysbord Kilde Zip (Downloaded 1724 gange)

Lad os få dine kommentarer og feedback ...

Dette indlæg kan være et godt eksempel for udtrykket "Teaching bedstemor til at suge æg" ... Fordi det er bare BASIC CSS Stuff. Men for dem, som glemmer mig, kan dette være en velsignelse i forklædning. Jeg har altid troet (jeg kunne miste mit job for at sige det), var det kun muligt at holde en del af HTML-sidens indhold statisk (mening, sin stilling stadig er det på Window Scroll), ved hjælp af nogle smarte scripts, gør alle de videnskabelige beregninger for at finde en dynamisk position, fældefangst Window.scroll begivenheder og sætte timeouts osv.

Aldrig troet, det kunne så simpelt som dette .... Her i CSS / HTML nedenfor, jeg har fire statiske blokke, den ene fastgjort til hver extrimities på siden, til TOP, højre og bund og venstre ... overflødigt at sige ... du kan vælge et eller flere hvis der skal være ...

CSS
. Statisk {display: block; z-index: 10, farve: # ffffff; overflow-x: hidden; overløb-y: hidden; position: ixed;
}
# Indhold {margin: 100px 150px 0px 160px; kant: 1px solid # e6e6e6}

# Wrap-t {top: 0px; baggrund: # 33CC66, bredde: 100%; Højde: 55px;}

# Wrap-l {top: 80px; baggrund: # FF9966; højde: 300px; bredde: 150px; kant: 2px solid # e6e6e6;}

# Wrap-b {bund: 0px; baggrund: # 3333CC, bredde: 100%; Højde: 55px;}

# Wrap-r {top: 80px; baggrund: # 6666FF; højde: 300px; bredde: 140px; kant: 2px solid # e6e6e6, højre: 0;}

HTML
<div id="contents"> Du forsiden indhold </ div>
<div id="wrap-b" class="static">
Statisk indhold på side nederst
</ Div>
<div id="wrap-t" class="static">
Statisk indhold på toppen Tilbage
</ Div>

<div id="wrap-l" class="static">
Statisk indhold på side til venstre
</ Div>
<div id="wrap-r" class="static">
Statisk indhold på side til højre
</ Div>

Se en Kløveretning prøve her

Mange gange vi føler behov for at skrive browser specfic hacks (selvom det ikke er en god praksis, vi UI udviklere er nødt til at ty til sådanne onder, indtil de store browsere Wars kommer til en våbenhvile). Tidligere havde jeg nævnt i denne artikel for din IES Kun , hvordan man skriver en CSS snippet, der ville være synlig for IE browsere <IE7 kun.

I går havde jeg en sag, hvor jeg ønskede at skrive nogle FireFox specifik CSS snippets. Nå! Jeg er ikke sikker på, hvis der er en CSS kode for dette, men der er en HTML. Der er en fangst dog dette stykke HTML doesnot pass HTML validering. Men, anywaz! Hvis du sidder fast dårligt eller som sådan, har ingen forbindelse til validering (engang vi nødt til at være grusom), kan du bruge følgende til at erklære et link til en FF kun stylesheet eller bare kode CSS inden for denne blok. Koden er

<comment> Sæt din FireFox kun HTML / CSS / Scripts her </ comment>

fx
<comment>
<style>
/ * Styles til FF kun * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Comment>

I "m glad for øjeblikket ...

Nå ja! I tidligere indlæg et par dage tilbage for Opacitet i IE8, jeg glemte at nævne et vigtigt punkt, at "IE 8 streng tilstand ikke giver mulighed for CSS uigennemsigtighed".
For dem, der donot forstår, hvad jeg mener med streng tilstand, her er hurtig tutorial .

Et værk omkring dette (Før IE dev team indse, at de har banet vejen for re-arbejdsrutiner over hele verden, for web-sites bruger pop-up lightboxer med nogle opacitet, og sat tilbage støtte til opacitet) er at bruge en semi gennemsigtigt billede ... helst i PNG-format (jeg har haft dårlig oplevelse at få gennemsigtige GIF-billeder til at arbejde som de skulle). Opret en PNG billede af farven og procentdelen af ​​gennemsigtighed du kan lide, i jer foretrukne billedredigeringsprogram og bruge det som baggrundsbillede til din lightbox overlay.

dvs
I stedet for at noget som dette

. Lighbox_overlay {
background-color: # ffffff;
z-index: 1001;
-Moz-opacity: 0,6;
opacitet: 0,60;
filter: alpha (opacity = 60);
}

Gør dette ....

. Lighbox_overlay {
baggrund: url (bkg.png) repeat;
}

At prøve det, KLIK HER! | AT DOWNLOADE, KLIK HER!

Hvis du ser denne side i IE8, så skal du til at se en fuld uigennemsigtig hvid baggrund bag dette indlæg. I går, min kollega påpegede det til mig (Som jeg er en af ​​de mennesker, der tilpasser sig ændringer langsomt og støt ... især browsere. Kan sige, Im en kujon, men sådan er det .... Som en UI udvikler, er jeg altid lort bange for nye browserversioner ... du ved, hvad Im tlaking om, right?)

Gravet rundt i mens, forsøger at finde en løsning til at ordne det, og hvad så ...
Denne gang vores ALL TIME FAVORIT browser har gjort det hele igen ved at droppe al støtte til CSS opacitet. Den ikke-standard `filter: alpha (opacity = # #)` CSS attribut er blevet fjernet, Nice, men også helt glemte at tilføje CSS3 opacitet understøttelse (ligesom hvordan alle de andre browserens pænt har holdt det i). Så for første gang siden Gud har fortalt os om CSS opacitet (siden IE 5,0, tror jeg), vil en web-browser ikke understøtter CSS opacitet.
Og nu til cremen på toppen: Officielt ord fra IE 8 hold? Det er "af design" og "vi vil overveje dette i en fremtidig version af IE".

PS: Prøv denne side i FF, sværger det ser pænt!

Da jeg læste denne artikel på A List Apart " Faux Absolute Positioning
af Eric Sol ", jeg var intet mindre end imponeret. Jeg blev også deprimeret majorly, forårsage, ærligt jeg tænkte på, hvorfor cant jeg komme op med noget fantastisk som denne.

Normalt, når vi opretter CSS-layout, bruger vi "position" eller "flyder", eller en meget dårlig kombination af begge. Eric Sol og hans team definere en ved siden af perfekt teknik af en ny type af CSS layout teknik, som de har døbt som "Faux Absolut Placering" efter faux kolonner teknik, der simulerer tilstedeværelsen af en kolonne.

Du ved, at problemet for os alle CSS udviklere har med sønderdelingsmidler layouts (De uventede ændringer af indholdet, der forårsager hele kolonner til wrap, når vi bruger svævede layouts) ... Nå! Historien synes!!
Dette layout teknikken er stadig meget ung, og har til smadret ud af alle de CSS guruer derude, før det bliver en un skriftlig standard. Jeg er glad for at bruge det NU! ... Og er allerede i midten af konvertering af mine tidligere problematiske / flydende un-nødvendigvis layouts i FAP layout allerede ... og er glad for at sige "vi allerede bruger Faux Absolute Positioning til denne blog websted, så godt" ... GO prøve det, NU!

Kudos Eric!

Hvis du nogensinde har gjort (eller lave en) en vertikal menu ved hjælp af listeelementer (Li) tags og CSS, kan du støde på, er dette endnu en fejl i Internet Explorer, hvor IE 6 indsætter disse huller mellem listeelementer, der indeholder blok niveau elementer, dvs hvis der er nogen mellemrum mellem listeelementerne i opmærkningen. Tak, men nej tak, den IE version 7 synes fri fra denne fejl.
Hvis ligesom mig, og mange flere, du tilhører denne gruppe af frustrerede udviklere, der stadig har til at få deres nye layouts, der arbejder i IE6, så det kan vise sig nyttige. Tag et kig ...

Sample markup:

<ul id="menu">
<li> <a href="#"> Forside </ a> </ li>
<li> <a href="#"> Om </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> portefølje </ a> </ li>
<li> <a href="#"> Ofte stillede spørgsmål </ a> </ li>
<li> <a href="#"> Kontakt os </ a> </ li>
</ Ul>

Du kan skabe nogle CSS, svarende til en nedenfor, for at transfrom ovenstående markup ind i en lodret menu ....

Sample CSS ...
# Menu {
margin: 0; padding: 0; baggrund: # FF9900;
list-style-type: none; bredde: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

De resultater, du vil se ...

Løsning for denne fejl ... (ændret / tilføjet CSS med fed kursiv)

# Menu {
margin: 0; padding: 0; baggrund: # FF9900; list-style-type: none; bredde: 150px;
float: venstre; / * denne indeholder svævede listeelementer * /
}
# Menu li {
margin: 0; padding: 0;
float: venstre; / * dette løser * /
Bredde: 100%; / * whitespace fejl i IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Hvis ovenstående løsning doesnot synes at arbejde (på grund kendt for at IE6 kun) ... prøv denne metode i stedet for

Du skal blot tilføje denne ekstra IE6 kun stilarter til din markup ...

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

Sæt Stylesheets på toppen

Hvis du ønsker en side til at indlæse gradvis, at der er, vi ønsker browseren til at vise det indhold, det er så hurtigt som muligt, sætte CSS øverst på siden inde i dokumentet HEAD. Dette gør sider synes at være lastning hurtigere, da dette letter progressiv destruktion af siden. Dette er især vigtigt for sider med masser af indhold og for brugere på langsomme internetforbindelser.

Det er et dokumenteret faktum, at for at forbedre den overordnede brugeroplevelse, er det vigtigt at give fremskridtsindikatorer og visuelle feedbacks. For at undgå at skulle tegne elementer på siden, i tilfælde, hvis deres stilarter forandring, nogle browsere, herunder IE, blokerer udgave af siden, indtil CSS er fuldt lastet. På grund af dette, bliver brugeren at se en tom hvid side.

W3 HTML Specifikationer 'også, at CSS skal jeg medtage i HEAD del af HTML-side. at the bottom of the page, so it's best not to use it. Bemærk også, at I IE @import opfører sig på samme som at bruge <link> nederst på siden, så det er bedst ikke at bruge det.

Undgå at bruge Browser Specifikke træk

Filtre: Brug af filter øger hukommelsen forbrug og anvendes pr element, ikke pr billede, så problemet er mangedoblet. Også Filtre er IE Proprietary, vil derfor ikke virke efter hensigten i andre browsere. Hvis du vil have gennemsigtige eller gradient baggrunde, skal du bruge 1Pixel med billeder.
Udtryk: CSS udtryk er en god egenskab at have i CSS, men stadig er IE bestemt funktion. Det er også vigtigt at bemærke, at disse udtryk er evalueret, når siden gengives, og størrelse, rullet og selv når brugeren bevæger musen hen over siden. Det er overflødigt at sige det kan påvirke ydeevnen af ​​din side. Derfor har man i enkle ord, Undgå at bruge CSS udtryk, medmindre du føler sine fordele "vejer mere end sine ulemper"

Eksternalisere du CSS

Brug af ekstern CSS vil resultere i hurtigere indlæsning af sider, fordi JavaScript-og CSS-filer er cached af browseren. Inline CSS i HTML-dokumenter bliver hentet hver gang HTML dokument der anmodes om. Dette kan faktisk reducere antallet af HTTP-forespørgsler der foretages, men det efterfølgende øger størrelsen på HTML-dokumentet. Ekstern CSS er cached af browseren, størrelsen af ​​HTML-dokumentet er reduceret uden at øge antallet af HTTP-anmodninger.

Bemærk venligst, at hvis brugerne på dit websted har flere sidevisninger per besøg, og mange af dine sider genbruge de samme scripts og stylesheets, er der et større potentiale gavn af cachede eksterne filer.

Pak din CSS fil

Pakning eller crunching din CSS er den praksis at fjerne unødvendige tegn fra kode for at reducere dens størrelse og dermed forbedre load tider.

CSS kan jeg kværnet ved at fjerne alle de kommentarer og eventuelle uønskede tegn som hvide rum, flere linjer osv.

Indlæg IE 6, har MSIE været så venlig at os UI udviklere ved at tilføje nogle flere CSS egenskaber standard til de fleste andre standard browsere. En sådan nyttig egenskab i "min-højde". Temmelig ligetil ejendom, som ikke behøver lange forpustet forklaring. Når en min-højde for en afdeling er indstillet, er det altid bevarer det sæt højde, når det indhold, husene optager mindre end den kan rumme og vigtigere (i modsætning til plain vanilla "højden" ejendom) skalaer eller i CSS ord, den opfører sig som en spaltningen, hvis "højde" er sat til "auto" ...

For nogle af os fattige udviklere, der stadig er forpligtet til at kode, CSS, som også skal arbejde i IE6, kan un-tilgængeligheden af "min-height", vise et show prop engang ... donot fortvivlelse.

Heldigvis har vi nok særheder i IE, at vi ville bruge til at ud fordel og hacke vores vej igennem for at nå vores mål ... nemlig at gøre en division division, som om den min-højde i IE6

Løsning 1: Ved hjælp af understregning Hack [ ... Læs mere ]

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

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

---

Løsning 2: Brug af CSS attribut 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>


CSS attribut Selector Hack drager fordel af det faktum, de browsere tidligere THA IE6 ignoreret en atribute-vælgeren. Bemærk kravet om en anden beholder division med class = "someclass". Bare presense i klassen attributten for denne opdeling, tilsidesætter højden tilbage til Auto, for Opera, Mozilla og MSIE7 og senere. IE6, som ikke understøtter atribute vælgere, ignorerer det.

Se demo af min højde hack for IE6