Havde læst dette i nogle blog ... syntes det var rart at katalogisere dette i fremtiden ref .... også kunne være et vigtigt interview spørgsmål, som du vil spurgt nogle dage ....
Skriv et uddrag af CSS, der vil vise et stykke med blåt i ældre browsere, rød i nyere browsere, grøn i IE6 og sort i IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
CSS til ikke-IE browsere: Dens ingen nyheder at CSS udviklere, at CSS Børne Selectors som eksemplet nedenfor, ikke synes at virke i IE.
f.eks div> span {nogle css}, der betyder "når et span element er et barn (og ikke et barnebarn eller stor barnebarn osv.) af en division element".
Men vi brugte denne CON til vores fordel. Historisk set har barnet vælgeren blevet anvendt til at skjule CSS kommandoer fra IE. Simpelthen ved at placere html>body foran en CSS kommando IE vil ignorere det:
html>body .foo { CSS commands go here ;}
Det virker, fordi <body> altid er et barn af <html> - det kan naturligvis aldrig være et barnebarn eller oldebarn af <html> .
Nu hvor IE 7 forstår barnet selector, skal du indsætte en tom kommentar tag i umiddelbart efter større end tegnet IE 7 vil ikke forstå denne vælgeren (hvem ved hvorfor!?) Og vil derfor helt ignorere denne CSS kommando.:
html> /**/ body .foo { CSS commands go here ;}
Hvis der ikke allerede har set dem før, har læst gennem følgende samt
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.
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] ->
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
Ved flere lejligheder, osv., mens laver sidelayout med popup afdelinger / lightboxer / Tips, vi kommer på tværs af situationer, hvor nogle Form Markere objekter sker for at være under disse POPUP divisioner, ved design, og det skinner igennem .... YUK!
Nå! du kan nemt løse dette ved at justere dine Z-indeksværdier passende til FF og IE7. Men den gode gamle (pun intended) IE6 ikke opfører sig efter hensigten .... SELECT BOX showet igennem, selv når du anvender nogle drastisk høj Z-indeksværdier til din popup Division ... Øv!!
Der er INGEN rettelser til dette problem, men der er, tror jeg, mere end et par måde at arbejde-around dette problem, men Im her for at fortælle dig den enkleste løsning, som jeg bruger, som virker fint for mig, i de fleste af de sager ....
"Skjul ROUGE SELECT felt, når du viser POPUP"
Blot i dit script kodestykke hvor du viser din popup, tilføje et stykke script til at indstille synligheden af SELECT Box til "Hidden"
document.getElementById ('my_select') style.visibilty = "skjult".
Og husk at sætte det tilbage ved lukning af din popup Division
. document.getElementById ('my_select') style.visibilty = "synlig";
hvor "my_select" er ID'et for den irritation SELECT Box
Håber dette hjælper ...
PS. Der er ofcourse andre muligheder som dynamisk positionining en IFRAME (samme størrelse som du PopUp) under popup DIV ... Dette virker også godt, men med en tilføjelse af masser af DOM-elementer, scripts og hovedpine. Jeg har brugt denne løsning også, og hvis du har brug for hjælp med denne indstilling, lad mig det vide. Vil være glad for at hjælpe!
Et par måneder tidligere vi så, hvordan vi kunne omfatte et stykke CSS, der ville være synlig for IE6 kun ( For din IES kun ). Der er andre måder at opnå dette. Du skal blot indeholde en separat CSS, der er specifikke for dit mål IE. dette kan opnås med det, er indkaldt som Betingede kommentarer.
Betingede Kommentarer er en måde at opdage browser type og version. Browser detektering udføres for at sikre, at indholdet præsenteres for browseren specifikke. Browseren detektion kan udføres ved hjælp af mange forskellige teknikker. Denne fremgangsmåde har adskillige fordele i forhold til tidligere metoder, der indeholdt stil switching hjælp af JavaScript. Til oversigt vigtigt få, ville være;
Hvordan gør vi det?
Gør noget i IE 5 kun
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Gør noget i alle IE-versioner
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Gør noget i alle IE-versioner nyere, at IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->
For flere betingede vartiations, læse denne info på MSDN:
Om Betinget Kommentar
Hvis du har skrevet CSS for tid, ville du have opleve de tidspunkter, hvor du bogstaveligt talt trække dit hår, når dine CSS-layouts så fint i alle de nye browsere (jeg mener browsere senere end IE6), men IE 6 kaster en raserianfald. Du kæmper hårdt for at tilpasse din CSS, men det virker ikke ... Nå! Prøv disse hacks ...
1. Understregning Hack: -
Pr. definition, giver CSS 2,1 specifikation underscore ("_") i CSS identifikatorer. Men mange browsere stadig synes at ignorere alle identificerer fortsatte med et understregningstegn, men IE. Dette IE har fejl / funktion bliver således en meget klar måde at indstille CSS egenskaber for IES kun. så husk, A CSS ejendom skrevet med understregning på starten er synlig for Internet Explorer (alle versioner, men IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}Se demonstration af denne understregning hack
Også den min højde hack for IE6 bruger underscore hack, tjek
2. Hash (#) Hack: -
Ligesom understregningstegn hack, denne ene er er også for IES oly, med en god forskel, ejendom identifikatorer forud med # på starten er synlig for alle IE-versioner, IE7 inkluderet og er usynlig for enhver anden standard browser.
.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 til IE6 kun: -
#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*/
}
Disse hacks synes sendt fra himlen, når intet andet virker ... Hvis nogen af disse hacks redder dit liv en dag, dont glemmer at behandle mig på en kop kaffe :)
Jeg havde dette problem, hvor, hvis du havde en mouseover begivenhed på en division (DIV), og at opdeling af en eller anden god grund skulle være transparent (som i mit tilfælde, hvor det blev forpligtet til at vise nogle tags over et billede på mouseover af denne gennemsigtig fordeling), IE ikke udløse mouseover begivenheden (virkede fint i FireFox).
Forsøgte flere muligheder ... hvoraf mange var bare et desperat forsøg på at få begivenheden til at fyre i IE. En af de fornuftige dem, som jeg troede kunne arbejde var at sætte en baggrundsfarve til opdeling og sæt opacity til nul ... Nå! fordybning arbejde!
Den endelige løsning, som syntes at arbejde og ikke forstyrre den funktionalitet jeg påkrævet var at sætte en én pixel gentaget / transparent baggrundsbillede i denne afdeling
... Silly! men nu IE virker glad.
Simple ... For at løse dette problem brug display: inline.
div {float:left;margin:40px;display:inline;}
Hvis du har et flydende element, såsom en div, og du placerer margin højre eller margin venstre på denne del, vil Internet Explorer 6,0 dobbelte margin værdi, rodede op i HTML / CSS layout. For at løse dette skal du blot tilføje display: inline; til din flydende element.
