Te drukken

Keer op keer op keer, Als alle andere browsers gezien zich te gedragen zoals verteld door de w3c regels, IE spiralen u uit voor de ontwikkeling geest door het gooien van een woedeaanval, wil dat niet lijkt om een ​​fix te hebben. Net zo iemand is dit probleem in IE7.

Probleemstelling:
Ik en zo zou veel van de andere ernstige web-ontwikkelaars hebben meer dan menig maal, dat wanneer er drijft in de lay-out, op de cursor boven een aantal links (anchor tags) genest opgemerkt, wordt het bevattende container lijkt een paar pixels verschuift naar rechts . Ik heb geprobeerd om google oplossingen voor dit probleem, maar hebben nauwelijks gevonden een redelijk antwoord op waarom en wanneer het zich voordoet (die kunnen helpen om dit probleem te voorkomen), dus ik heb nog nooit een duidelijke oplossing voor het probleem ofwel ...

Mogelijke oplossing:
Uit ervaring, ik heb bericht 90% procent van de keren dat wil zeggen, dat dit probleem is opgelost door het toevoegen van een zoom woning in de CSS definitie van de mis-gedrag container ...

 # Somediv {
       zoom: 1;
 }

weer de redenen zijn dubbelzinnig ... probeer dan deze ...
Sommige elementen in IE een "hasLayout" eigenschap, wat "waar" is standaard. Veel visuele CSS-gedrag, bijvoorbeeld een alfa-filter werkt alleen op een element dat hasLayout. en de {Zoom: 1} lijkt te geven het doel van de elementen hasLayout woning .... Nuttig? Ben ik niet zo denken ...

De zoom woning is lijkt ook te worden ondersteund door Chrome, maar het gebruik ervan dint lijken te veel nadelige gevolgen te maken op mijn lay-out ... probeer het maar, Als het voor u werkt ... als het niet, deze pagina bookmarken onder "CSS craps"

Google begint een beweging snel mensen te dumpen IE6 ... Door afluisteren IE6 gebruikers met een POPUP laden van de pagina ... is misschien niet een heel goed idee ... maar het zijn een UI-ontwikkelaar, moet ik deze band wagon mee ... een minder browser voor mij zorgen te maken over ... Sorry egoïstisch het is! maar ik heb onder andere dit javascript ... (TRY DEZE PAGINA IN IE6) ...
Hey! en op de heldere noot ... Zie het is een weergave van de POWER van JavaScript .... het kan zelfs brengen een gigantische (of een keer het was)

Dus ... helpen zich te ontdoen de wereld van de IE6 met een lijn van javascript!

http://code.google.com/p/sevenup/

Als je css persoon, dan zou je weten dat de pijn in het krijgen van uw lay-outs werken cross-browser. IE8 is nog een andere roet in het eten voor ons ontwikkelaars. Anywaz! als je kwam op dit onderwerp, zoals ik gisteren deed, waar je perfect werkende CSS in IE7 (en eerder) en Firefox plotseling is begonnen met het gooien van woede-uitbarstingen in IE8, probeer dan deze ... Het mooi leek om mijn problemen op te lossen op het moment ....

Met behulp van Meta verklaring, kunnen we specificeren de rendering engine willen we IE8 gebruiken. Dus te dwingen IE8 te maken als IE7 ... Plaats de volgende metatag in de kop van het document: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Standaard IE Meta zou zijn: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
die zou IE8 maakt de pagina met de nieuwe standards mode.

Indien gewenst kan deze syntax worden gebruikt voor andere herbergen browsers als volgt:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

Meer over doctypes:

ALS je nog onbekend bent met het soort dier de naam "Doctype" ... hier is een aantal snelle gelezen
Wat zijn doctypes? Wat zijn browser GRILLEN & strikte modus?
Het instellen van de DOCTYPE in XSL

Voor een meer diepgaand inzicht in doctypes, probeer dan het bezoeken van deze links ...
A List Apart: Fix Your site met de juiste DOCTYPE!
A List Apart: Beyond DOCTYPE: Web Standards, voorwaartse compatibiliteit, en IE8

Opmerking: Hoewel velen van ons HTML / CSS mensen zijn het belang van de DOCTYPE verklaring! Verwaarlozen in onze documenten, stellen van de juiste DOCTYPE, is meestal het antwoord op de meeste cross browser kwesties.

CSS voor niet-IE browsers: Het is geen nieuws voor CSS ontwikkelaars die, CSS Child Selectors, zoals het voorbeeld hieronder, lijkt niet te werken in IE.

bv. div> span {sommige css}, dat betekent "als een span-element is een kind (en niet een kleinkind of grote grand kind etc.) van een divisie element".

Maar we gebruikten deze CON in ons voordeel. Historisch gezien is het kind selector is gebruikt om CSS-commando's verbergen IE. Gewoon door het plaatsen van html>body in de voorkant van elke CSS commando IE zal negeren:

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

Dit werkt omdat <body> is altijd een kind van <html> - het kan natuurlijk nooit een kleinkind of achterkleinkind van <html> .

Nu IE 7 het kind selector begrijpt, moet je een lege commentaar-tag in te voegen in direct na het groter dan teken IE 7 zal dit niet zo selector (wie weet waarom?) Te begrijpen en zal dus volledig negeren CSS commando.:

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

Als dat nog niet hebt deze eerder gezien, hebben een read via de volgende en

• Conditional Comments: Voor uw IE's Only-deel Duex
• CSS hack: Javascript, CSS, HTML voor alleen Firefox
• Voor uw IE's Only

Zoals gewoonlijk, een van de vele andere vreemde problemen met IE en dit moet men rangen in TOP 10 van IE Quirks.

Probleemstelling (Dit was mijn probleem, misschien heb je gelijk slecht gedrag):
Ik heb veel DIV's in de pagina met klasse "sectionhead", dat is niets anders dan de titel van een hoofdstuk over de pagina. Dus ik heb wat stijl uitzien als deze

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

De div is een licht grijze balk met een aantal zwarte tekst. Wat gebeurt er in IE is een aantal van deze sectie headers worden weergegeven ok, maar sommige zijn onzichtbaar, totdat u naar de pagina of klik op iets op de pagina, etc. Ergens hebben ze de neiging te verdwijnen wanneer u op de 'alt' toets ingedrukt terwijl je page down of scroll met de schuifbalk. Ze lijken soms opnieuw optreedt wanneer u herladen (F5) de pagina. Ik Kortom een ​​perfect eenvoudige DIV met een aantal eenvoudige stijl gedraagt ​​zich slecht.
Wat zou veroorzaken, een grillige gedrag? Nou! Eerlijk gezegd, geen idee!

Mogelijke oplossing:
Opnieuw vraag me niet waarom, maar in veel gevallen dit probleem heeft de neiging te verdwijnen bij het toevoegen van positie: ten opzichte van de mis gedragen elementen stijl, zoals deze

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

Weird, maar wat te zeggen? God Bless me van IE!

EN DOEN DEEL MET VS, als u vergelijkbare problemen had.

Nou ja! In de eerdere post een paar dagen terug over dekking in IE8, ik was vergeten een belangrijk punt dat 'IE 8 de strikte modus niet mogelijk is om CSS opacity "te noemen.
Voor degenen die geen waarde te begrijpen wat ik bedoel met de strikte modus, hier is een snelle handleiding .

Een werk om aan deze (Voor IE dev team beseffen dat ze weg geplaveid hebben voor re-work routines over de hele wereld, voor web-sites met behulp van Pop-up lightboxes met wat dekking, en weer terug ondersteuning voor dekking) is het gebruik van een semi-transparante afbeelding ... bij voorkeur in PNG-formaat (Ik heb slechte ervaring krijgen van transparante GIF-afbeeldingen om te werken als ze zouden moeten). Maak een PNG-afbeelding van de kleur en het percentage van transparantie je wilt, in je favoriete beeldbewerkingsprogramma en gebruik het als een achtergrondafbeelding voor uw lightbox overlay.

dat wil zeggen
In plaats van iets als dit

. Lighbox_overlay {
background-color: # ffffff;
z-index: 1001;
-Moz-opacity: 0.6;
opacity: 0.60;
filter: alpha (opacity = 60);
}

Doe dit ....

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

Proberen, KLIK HIER! | TE DOWNLOADEN, KLIK HIER!

Als u foto's bekijkt deze pagina in IE8, dan moet je het zien van een volledig dekkende witte achtergrond achter dit bericht. Gisteren, mijn collega die mij aanwees (Zoals ik ben een van die mensen die zich aanpassen aan veranderingen langzaam en gelijkmatig ... vooral browsers. Zou kunnen zeggen, Im een ​​lafaard, maar het zij zo .... Omdat het een UI ontwikkelaar, ik ben altijd stront bang voor nieuwe browser versies ... je weet wat Im tlaking over, toch?)

Gegraven rond, terwijl het proberen om een ​​oplossing voor het probleem te verhelpen dan vinden en wat ...
Deze keer onze ALL TIME FAVORIETE browser heeft gedaan helemaal opnieuw door het droppen van alle ondersteuning voor CSS opaciteit. De niet-standaard `filter: alpha (opacity = # #)` CSS attribuut is verwijderd, Nice, maar ze ook totaal vergeten om CSS3 ondoorzichtigheid ondersteuning (zoals hoe alle andere browser is mooi hebben gehouden in) toe te voegen. Dus, voor het eerst sinds God vertelde ons over CSS opacity (sinds IE 5.0, denk ik), zal een web-browser ondersteunt geen CSS opaciteit.
En nu voor de crème op de top: officiële woord van IE 8 team? Het is "by design" en "we zullen dit beschouwen in een toekomstige versie van IE".

PS: Probeer deze pagina in FF, zweer het ziet er netjes uit!

Als u ooit gemaakt (of het maken van een) een verticale menu met behulp van de lijst items (li) tags en CSS, kunt u tegenkomen, is dit nog een bug in Internet Explorer, waar IE 6 inserts deze kloof tussen de lijst met items die block-level elementen bevatten, dat wil zeggen als er een witruimte tussen de lijstitems in de markup. Bedankt, maar nee dank je, de IE versie 7 lijkt vrij is van deze bug.
Als je zoals ik, en nog veel meer, behoort u tot deze groep van gefrustreerde ontwikkelaars, die nog aan hun nieuwe lay-outs, het werken in IE6 te krijgen, dan kan dit nuttig zijn. Neem een ​​kijkje ...

Voorbeeld opmaak:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Over </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Neem contact met ons </ a> </ li>
</ Ul>

Je zou kunnen maken wat CSS, vergelijkbaar met een onder, op het bovenstaande opmaak transfrom in een verticale menu ....

Voorbeeld CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # fff;
}

De resultaten ziet u ...

Oplossing voor deze bug ... (gewijzigd / toegevoegd CSS in vet cursief)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * deze bevat gedreven lijstitems * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Dit corrigeert de * /
width: 100%; / * whitespace bug in IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # fff;
}

Als de bovenstaande oplossing gebeurt onafhankelijk lijkt te werken (om redenen bekend dat IE6 beschikbaar) ... in plaats daarvan proberen deze methode

Voeg deze extra IE6 alleen stijlen om uw opmaak ...

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

Bericht IE 6, is MSIE zo vriendelijk geweest om ons UI ontwikkelaars door het toevoegen van een paar meer CSS eigenschappen standaard op de meeste andere standaard browsers. Een van die nuttige eigenschap in 'min-height ". Pretty straight forward onroerend goed dat geen lange adem uitleg behoeft. Als een min-height voor een divisie is ingesteld, altijd dat bepaalde hoogte blijft wanneer de inhoud ervan huizen neemt minder dan het belangrijkste is kan houden en (in tegenstelling tot de plain vanilla "height" eigendom) schalen of in CSS woorden, het gedraagt ​​zich als een afdeling waarvan de "hoogte" is ingesteld op "auto" ...

Voor sommigen van ons arme ontwikkelaars, die nog nodig zijn om code CSS die ook moeten werken in IE6, kunnen niet-beschikbaarheid van de "min-height ', soms blijken een show stopper ... donot wanhoop.

Gelukkig hebben we genoeg eigenaardigheden in IE, dat we gebruiken om uit te maken en te hacken onze weg door om ons doel te bereiken ... dat wil zeggen een DIVISIE divisie alsof het min-height in IE6

Oplossing 1: Het gebruik van de underscore Hack [ ... Lees meer ]

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

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

---

Oplossing 2: Met behulp van de CSS Attribute 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>


De CSS Attribute Selector Hack maakt gebruik van het feit dat de browsers eerder tha IE6 een atribute-selector genegeerd. Let op de eis van een andere container divisie met class = "someclass". Alleen al de presense van de klasse attribuut voor deze divisie, heeft voorrang op de hoogte Terug naar Auto voor Opera, Mozilla en MSIE7 en later. IE6, die geen ondersteuning biedt voor atribute selectors, negeert het.

Bekijk de demo van de min-height hack voor IE6

Bij verschillende gelegenheden, terwijl het doen van pagina lay-outs met popup divisies / lightbox / tips etc komen we situaties waarin een of andere vorm SELECT-objecten gebeurt te zijn onder deze POPUP Divisies, door het ontwerp en het laat zien door middel van .... YUK!

Nou! je kan makkelijk dit oplossen door het aanpassen van uw Z-INDEX waarden adequaat voor FF en IE7. Maar Good Old (pun intended) IE6 gedraagt ​​zich niet zoals de bedoeling is .... De SELECT-BOX voorstelling door, zelfs nadat u een aantal drastisch hoge Z-INDEX waarden zijn van toepassing op uw PopUp divisie ... Bummer!!

Er zijn geen oplossingen voor dit probleem, maar er zijn, geloof ik, meer dan een paar manier om te werken-om dit probleem Maar Im hier om u te vertellen de eenvoudigste oplossing die ik gebruik, dat werkt prima voor mij, in de meeste gevallen ....

"Verberg de ROUGE SELECT-BOX Op vertoon van DE POPUP"

Gewoon in je script fragment waar u uw pop-up te tonen, voeg een stukje script om de zichtbaarheid van de SELECT-Box ingesteld op "verborgen"

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

En vergeet niet om het terug zetten bij het sluiten van uw popup divisie

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

waar "my_select" is de ID van de irritatie SELECT Box

Hoop dat dit helpt ...

PS. Er zijn natuurlijk andere opties zoals dynamisch positionining een IFRAME (net zo groot als je PopUp) onder de Popup DIV ... Dit werkt ook goed, maar met een toevoeging van lasten van DOM-elementen, scripts en hoofdpijn. Ik heb deze oplossing ook gebruikt, en als je hulp nodig hebt met deze optie, weet laat het me weten. Zullen blij zijn om te helpen!