Hade läst detta på något blogg ... tyckte det var skönt att katalogisera detta för framtiden ref .... skulle också kunna vara en viktig intervju fråga som du skulle bett en dag ....
Skriva en snutt av CSS som kommer att visa ett stycke i blått i äldre webbläsare, rött i nyare webbläsare, gröna IE6 och svart i IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
CSS för icke-IE-webbläsare: Det ingen nyhet för CSS utvecklare att CSS barn Selectors som exemplet nedan, inte verkar arbeta i IE.
t.ex. div> span {vissa css}, som betyder "när en span element är ett barn (och inte ett barnbarn eller barnbarns barn osv) för en division element".
Men vi använde denna CON till vår fördel. Historiskt har barnet väljaren använts för att dölja CSS kommandon från IE. Helt enkelt genom att placera html>body framför ett CSS-kommandot IE ignorerar det:
html>body .foo { CSS commands go here ;}
Detta fungerar eftersom <body> är alltid ett barn av <html> - det kan ju aldrig vara ett barnbarn eller barnbarnsbarn till <html> .
Nu när IE 7 förstår barnet väljaren, måste du sätta en tom kommentar tagg i direkt efter större än-tecken IE 7 då inte förstå detta val (som vet varför?) Och kommer därför helt ignorera detta CSS kommando.:
html> /**/ body .foo { CSS commands go here ;}
Om inte redan sett dessa tidigare har en läsa igenom följande som också
Som vanligt, en av de många konstiga problem med IE och detta måste rankas i topp 10 i IE Quirks.
Problemformuleringen (Detta var mitt problem, kanske du har liknande misbehaviors):
Jag har många DIV finns i sidan med klassen "sectionhead", som bara är titeln på ett avsnitt på sidan. Så jag har lite stil ser ut så här
. Sectionhead {font-size: 18px; Bakgrund: # cfcfcf; padding: 5px;}
Div är en ljusgrå bar med lite svart text. Vad händer i IE är en del av dessa avsnitt huvuden visas ok, men en del är osynliga, tills du bläddra sidan eller klicka något på sidan etc. Någon gång de tenderar att försvinna när du klickar på "Alt-tangenten när du sida ned eller bläddra med rullningslisten. De verkar ibland igen när du laddar (F5) sidan. Jag kort helt enkelt DIV med några enkla stil fungerar BAD.
Vad som kan orsaka en sådan oberäkneligt beteende? Tja! Ärligt talat, ingen aning!!
MÖJLIG LÖSNING:
Återigen frågar mig inte varför, men i många fall detta problem tenderar att försvinna när du lägger position: i förhållande till MIS beter elementen stil, så här
. Sectionhead {font-size: 18px; Bakgrund: # cfcfcf; padding: 5px; position: relativt}
Konstigt men vad man ska säga? Gud välsigne mig från IE!
OCH Delar MED OSS, om du hade liknande problem.
Om du någonsin har gjort (eller gör en) en vertikal meny med listobjekt (Li) taggar och CSS, kan du stöta på detta ännu en bugg i Internet Explorer, där IE 6 inlägg dessa luckor mellan listobjekt som innehåller element blocknivå, dvs om det finns något blanktecken mellan listobjekten i markeringen. Tack, men nej tack, verkar IE version 7 fri från detta fel.
Om som jag, och många fler, du tillhör denna skara frustrerade utvecklare som fortfarande måste få sina nya layouter, som arbetar i IE6, då detta kan vara till nytta. Ta en titt ...
Exempel på kod:
<ul id="menu">
<li> <a href="#"> Hem </ a> </ li>
<li> <a href="#"> Om </ a> </ li>
<li> <a href="#"> Tjänster </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> Vanliga frågor </ a> </ li>
<li> <a href="#"> Kontakta oss </ a> </ li>
</ Ul>
Du kan skapa viss CSS, liknande en nedan, för att transfrom ovanstående markeringar i en vertikal meny ....
Provet CSS ...
# Meny {
margin: 0; padding: 0; Bakgrund: # FF9900;
list-style-type: none; width: 150px;
}
# Menyn li {margin: 0; padding: 0;}
# Menyn en {display: block;
color: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}
Resultatet ser du ...
Lösning för denna bugg ... (modifierad / till CSS i fet stil)
# Meny {
margin: 0; padding: 0; Bakgrund: # FF9900; list-style-type: none; width: 150px;
float: left; / * Denna innehåller flottades listobjekt * /
}
# Meny li {
margin: 0; padding: 0;
float: left; / * Detta fixar * /
width: 100%, / * whitespace buggen i IE6 * /
}
# Menyn en {
display: block; color: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}
Om ovanstående lösning doesnot verkar fungera (av skäl som är kända för att IE6 endast) ... prova denna metod i stället
Lägg bara till den kompletterande IE6 endast stilar till din markup ...
<- [Om lt IE 7>
<style type="text/css">
# Menyn li a {display: inline-block;}
# Menyn li a {display: block;}
</ Style>
<[Endif] ->
Inlägg IE 6 har MSIE varit vänlig nog att vi UI utvecklare genom att lägga till några fler CSS-egenskaper standard för de flesta andra vanliga webbläsare. En sådan användbar egenskap i "min-höjd". Ganska rakt fram fastigheter som behöver ingen lång omständlig förklaring. När en min-höjd för en division är inställd, det alltid behåller den uppsättningen höjd när det innehåll som husen upptar mindre än den kan hålla och allt (till skillnad från plain vanilla "höjd" egendom) skalor eller CSS ord, beter det som en delningen vilkas "höjd" är inställd på "auto" ...
För vissa av oss stackars utvecklare som fortfarande krävs för att koda CSS som också måste arbeta i IE6, kan un-tillgängligheten av "min-höjd", visar en show propp någon gång ... inte apparaten förtvivlan.
Lyckligtvis har vi tillräckligt med egenheter i IE, att vi skulle använda för att reda fördel och hacka oss igenom för att nå vårt mål ... dvs göra en DIVISION division som om den min-höjd i IE6
Lösning 1: Använda understreck Hack [ ... Läs mer ]
.box1 {
min-height: 200px;
height:auto;
_height:200px;
}HTML: -
<div class="box1">Some dynamic content with variable height ...</div>
Lösning 2: Använda 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 drar fördel av det faktum webbläsarna tidigare tha IE6 ignoreras en atribute-väljare. Observera kravet på en annan behållare division med class = "someclass". Bara presense i klassen attributet för denna uppdelning, åsidosätter höjden tillbaka till auto för Opera, Mozilla och MSIE7 och senare. IE6, som inte stöder atribute väljare, ignorerar det.
Visa demo av min höjd hack för IE6
Vid flera tillfällen medan du gör sidlayouter med popup divisioner / lightboxar / tips etc vi kommer i situationer där någon form Markera objekt råkar vara under dessa POPUP sektionerna, genom design och det märks genom att .... FY!
Tja! du kan enkelt fixa detta genom att justera dina Z-index värden på lämpligt sätt för FF och IE7. Men Good Old (pun intended) IE6 inte beter sig som avsett .... SELECT BOX lyser igenom även när du har några drastiskt höga z-index värden enligt PopUp Division ... Bummer!!
Det finns INGA korrigeringar för detta problem, men det finns, tror jag, mer än ett fåtal sätt att arbeta-runt detta problem, men Im här för att berätta den enklaste lösningen som jag använder, som fungerar bra för mig, i de flesta fall ....
"Dölj ROUGE SELECT BOX när du visar POPUP"
Bara i skriptet textsnutt där du visar din popup, lägg till en bit skript för att ställa in synlighet för SELECT Box till "Hidden"
document.getElementById ('my_select) style.visibilty = "dold".
Och kom ihåg att sätta på den igen slutet av din popup Division
. document.getElementById ('my_select) style.visibilty = "synliga";
där "my_select" är ID för den irritation SELECT Box
Hoppas att detta hjälper ...
PS. Det finns såklart andra alternativ som dynamiskt positionining en IFRAME (samma storlek som du PopUp) under Popup DIV ... Detta fungerar bra också, men med ett tillägg av massor av DOM element, manus och huvudvärk. Jag har använt denna lösning också, och om du behöver någon hjälp med det här alternativet, låt mig veta. Kommer vara glad att hjälpa till!
Några månader tidigare såg vi, hur vi skulle kunna innefatta en del av CSS som skulle vara synlig för IE6 endast ( För er IE endast ). Det finns andra sätt att uppnå detta. Helt enkelt inkludera en separat CSS, som är specifik för ditt mål IE. Detta skulle kunna uppnås med vad som kallas Villkorliga kommentarer.
Villkorliga Kommentarer är ett sätt att upptäcka typ av webbläsare och version. Webbläsaridentifiering utförs för att säkerställa att innehållet presenteras för webbläsaren specifik. Webbläsare detektering kan ske med användning av många olika tekniker. Denna metod har flera fördelar jämfört med tidigare metoder, som inkluderade stil växling med javascript. För att lista viktigt några, skulle vara;
Hur gör vi detta?
Gör något i IE 5 endast
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Gör något i Alla IE-versioner
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Göra något i alla IE-versioner nyare att IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->
För mer villkorliga vartiations, läs denna information på MSDN:
Om villkorlig kommentar
Om du har skrivit CSS för när, skulle du har erfarenhet de gånger då du bokstavligen drar ditt hår när dina CSS-layouter såg bra ut i alla nya webbläsare (jag menar webbläsare senast IE6), men IE 6 kastar ett utbrott. Du kämpar hårt för att anpassa din CSS, men det fungerar inte ... Tja! Prova dessa Hacks ...
1. Understreck Hack: -
Per definition kan CSS 2,1 specifikationen understreck ("_") i CSS identifierare. Men många webbläsare tycks fortfarande ignorera alla identifierar fortsatte med ett understreck, men IE. Detta IE: s fel / funktion blir därmed ett mycket tydligt sätt att ställa CSS egenskaper för IE bara. Så kom ihåg, en CSS-egenskapen skriven med understreck på början är synlig för Internet Explorer (samtliga versioner, men IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}Visa demonstration av denna understreck hack
Dessutom använder min höjd hack för IE6 understreck hacka, kolla in
2. Fyrkant (#) Hack: -
Liksom understreck hacka, är detta en för är för IE Oly, med en bra skillnad är egendom identifierare föregås # på start synligt för alla IE-versioner, inklusive IE7 och är osynlig för alla andra standard webbläsare.
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}
3. CSS för IE6 endast -
#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*/
}
Dessa hacka verkar himlen skickas när ingenting annat fungerar ... Om någon av dessa hacka sparar ditt liv en dag, glöm inte att behandla mig en kopp kaffe :)
Jag hade det här problemet där, om du hade en mouseover händelse på en division (DIV) och att fördelningen av någon anledning måste vara transparent (som i mitt fall, där det krävs för att visa vissa taggar över en bild på mouseover av denna öppna Division), inte IE för att trigga mouseover händelsen (fungerade bra i Firefox).
Försökte flera alternativ ... många som bara var ett desperat försök att få evenemanget att avfyra i IE. En av de förnuftiga sådana, som jag trodde skulle fungera var att sätta en bakgrundsfärg på uppdelningen och ställ in opaciteten till noll ... Well! uppkomsten arbete!
Den slutliga lösning som verkade fungera och inte störa funktionaliteten jag som krävdes var att sätta en pixel upprepad / transparent bakgrundsbild i denna delning
... Silly! men nu IE verkar lycklig.
Enkelt ... För att korrigera denna display problemet användning: inline.
div {float:left;margin:40px;display:inline;}
Om du har en flöt element såsom en div och du placerar marginalen höger eller margin-left på den del, kommer Internet Explorer 6,0 fördubbla marginalen värde mathållning upp html / css layout. För att åtgärda detta helt enkelt lägga display: inline; till din flytande element.
