2008 10 oktober 2008
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
nog geen reacties | tags: IE Bugs , IE Fixes , IE Hacks , dwz emissies | Gepost in Browser Quirks , CSS
2008 04 oktober 2008
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.
nog geen reacties | tags: IE Bugs , IE Fixes , IE Hacks , dwz emissies | Gepost in Browser Quirks , CSS , HTML
2008 15 juli 2008
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!
nog geen reacties | tags: IE Bugs , IE Fixes , dwz emissies , IE8 | Gepost in Browser Quirks , CSS
2008 06 juli 2008
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!
nog geen reacties | tags: IE Bugs , dwz emissies , IE8 | Gepost in Browser Quirks , CSS
2008 20 juni 2008
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] ->
nog geen reacties | tags: IE Bugs , IE Fixes , IE Hacks , dwz emissies , IE6 , Tutorials | Gepost in Browser Quirks , CSS
2008 12 april 2008
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
nog geen reacties | tags: IE Bugs , IE Fixes , IE Hacks , dwz emissies , IE6 , Tutorials | Posted in CSS
2008 15 maart 2008
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!
nog geen reacties | tags: IE Bugs , IE Fixes , IE Hacks , dwz emissies , IE6 | Gepost in Browser Quirks , CSS , HTML , JavasScript
2008 08 januari 2008
Een paar maanden eerder zagen we, hoe we een stukje CSS dat zou zichtbaar zijn voor IE6 alleen (onder andere voor uw IE's Only ). Er zijn andere manieren om dit te bereiken ook. Neem gewoon een aparte CSS, specifiek voor uw doelgroep IE. dit kan worden bereikt met wat wordt genoemd als Conditional Comments.
Conditional Comments is een manier om het type browser en de versie op te sporen. Browser detectie wordt uitgevoerd opdat de inhoud aan de browser specifieke. Browser detectie kan worden gedaan met behulp van veel verschillende technieken. Deze methode heeft een aantal voordelen ten opzichte van eerdere methoden, die stijl schakelen met behulp van javascript inbegrepen. Voor een lijst van belangrijke weinig, zou zijn;
- Scripting is niet vereist
- Cross-browser
Hoe doen we dit?
Doe iets in IE 5 alleen
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Doe iets in Alle Explorer versies
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Doe iets in Alle Explorer versies nieuwere dat IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->
Voor meer voorwaardelijke vartiations, lees deze info op MSDN:
Over voorwaardelijke reactie
nog geen reacties | tags: IE Bugs , IE Fixes , IE Hacks , dwz emissies | Gepost in Browser Quirks , CSS , HTML , JavasScript
2007 De 08 september 2007
Als u hebt opgesteld, CSS voor de tijd, zou je ervaring hebt die momenten waarop je letterlijk trek je haar wanneer uw CSS-lay-outs zag er prima in alle nieuwe browsers (ik bedoel browsers later dan IE6), maar IE 6 gooit een driftbui. Je vechten hard om uw CSS aan te passen, maar het werkt niet ... Nou! Probeer deze hacks ...
1. Underscore Hack: -
Per definitie, CSS 2.1-specificatie kan underscore ("_") in CSS id's. Maar veel browsers lijken nog steeds op een identificeert ging met een underscore te negeren, maar IE. Deze IE bug / feature wordt dus een heel duidelijke manier om de CSS-eigenschappen alleen voor IE. dus denk eraan, een CSS-eigenschap geschreven met de underscore op het begin zichtbaar is voor Internet Explorer (alle versies, maar IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}
Bekijk de demonstratie van deze underscore hack
Ook de min-height hack voor IE6 de underscore hack gebruikt, check out
2. Hekje (#) Hack: -
Net als de underscore hack, deze ook is, is voor IE oly, met een goed verschil, eigendom id voorafgegaan door # op het begin is zichtbaar voor alle IE-versies, IE7 inbegrepen en is onzichtbaar voor elke andere standaard browser.
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}
Deze hack mooi is gebruikt om een cross browser verticale lijnen oplossing aan te tonen, eens een kijkje op dit artikel om ons meer te vinden
3. CSS voor IE6 alleen: -
#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*/
}
Deze hacks lijkt de hemel gezonden, als niets anders werkt ... Als een van deze hacks redt je leven op een dag, vergeet niet om me te trakteren op een koffie :)
nog geen reacties | tags: IE Bugs , IE Fixes , IE Hacks , dwz emissies | Gepost in Browser Quirks , CSS , JavasScript
2007 12 juli 2007
Ik had dit probleem, waar, als je een mouseover gebeurtenis op een divisie (DIV) en die afdeling, voor een aantal goede redenen had om transparant te zijn (zoals in mijn geval, waar het nodig was om een aantal labels weer te geven op een plaatje de muis overheen gegaan van deze transparante divisie), IE niet aan de mouseover gebeurtenis (werkte prima in FireFox) te activeren.
Geprobeerd verschillende opties ... veel van die net een wanhopige poging om het evenement te krijgen om te vuren in IE. Een van de verstandige degenen, dat ik dacht dat zou kunnen werken was om een achtergrond kleur in te stellen voor de divisie en de dekking op nul gezet ... Nou! dint werk!
De uiteindelijke oplossing die leek te werken en niet verstoren de functionaliteit die ik verplicht was om een een pixel zet herhaald / transparante achtergrond afbeelding in die afdeling
... Silly! maar nu IE lijkt gelukkig.
nog geen reacties | tags: IE Bugs , IE Fixes , IE Hacks , dwz emissies | Posted in Browser Quirks
