Hadde lest dette i noen bloggen ... syntes det var hyggelig å katalogisere dette for fremtiden ref .... også kunne være et viktig intervju spørsmål som du ville spurt en dag ....
Skriv en kodebit CSS som vil vise et avsnitt i blått i eldre nettlesere, rød i nyere nettlesere, grønn i IE6 og 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 for Non-IE Nettlesere: Dens ingen nyheter å CSS utviklere som, CSS barn velgere som i eksempelet nedenfor, ikke synes å fungere i IE.
f.eks div> span {noen css}, som betyr "når en span element er et barn (og ikke et barnebarn eller stor grand barn osv.) av en divisjon element".
Men vi brukte denne CON til vår fordel. Historisk har barnet velgeren blitt brukt til å skjule CSS kommandoer fra IE. Bare ved å plassere html>body foran CSS kommando IE vil ignorere det:
html>body .foo { CSS commands go here ;}
Dette fungerer fordi <body> er alltid et barn av <html> - det kan selvsagt aldri være et barnebarn eller oldebarn av <html> .
Nå som IE 7 forstår barnet velgeren, må du sette inn en tom kommentar tag i rett etter større enn-tegn IE 7 vil da ikke forstå denne velgeren (som vet hvorfor?) Og vil derfor helt ignorere denne CSS kommandoen.:
html> /**/ body .foo { CSS commands go here ;}
Dersom ikke allerede har sett disse før, har en lese gjennom følgende tillegg
Som vanlig, en av de mange noen merkelige problemer med IE og dette må man rangerer i TOP 10 av IE quirks.
Problemstillingen (Dette var mitt problem, kanskje du har lignende dårlig oppførsel):
Jeg har mange DIV står i siden med klassen "sectionhead", som er ingenting, men tittelen på et avsnitt på siden. Så jeg har litt stil ser slik ut
. Sectionhead {font-size: 18px; bakgrunn: # cfcfcf; padding: 5px;}
Det div er en lys grå bar med litt svart tekst. Hva skjer i IE er noen av disse § hoder vises ok, men noen er usynlig, INNTIL, du bla på siden eller klikker på noe på siden osv. Noen ganger har de en tendens til å forsvinne når du klikker på "alt"-tasten når du side ned eller bla med rullefeltet. De noen ganger synes å dukke opp igjen når du har lastet (F5) siden. Jeg kort en perfekt enkel DIV med noen enkle stil oppfører BAD.
Hva kunne forårsake en slik uberegnelig oppførsel? Vel! Oppriktig, NO IDEA!
MULIG LØSNING:
Igjen ikke spør meg hvorfor, men i mange tilfeller dette problemet en tendens til å forsvinne når du legger posisjon: i forhold til mis oppføre elementene stil, som dette
. Sectionhead {font-size: 18px; bakgrunn: # cfcfcf; padding: 5px; stilling: relative}
Merkelig, men hva du skal si? God Bless meg fra IE!
OG GJØRE AKSJE MED OSS, hvis du hadde lignende problemer.
Hvis du noensinne har gjort (eller lage en) en vertikal meny med listeelementer (Li) tagger og CSS, kan det oppstå, dette enda en feil i Internet Explorer, hvor IE 6 inserts disse gapene mellom listeelementer som inneholder block-nivå elementer, dvs. hvis det er noen mellomrom mellom listeelementene i markeringen. Takk, men ingen takk, synes IE versjon 7 fri fra denne feilen.
Hvis som meg, og mange flere, tilhører du til dette bandet av frustrerte utviklere, som fortsatt har for å få sine nye oppsett, som arbeider i IE6 også, så dette kan vise seg nyttig. Ta en titt ...
Eksempel markering:
<ul id="menu">
<li> <a href="#"> Hjem </ a> </ li>
<li> <a href="#"> Om </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> portefølje </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontakt oss </ a> </ li>
</ Ul>
Du kan skape litt CSS, lik en nedenfor, for å transfrom ovenfor markup i en vertikal meny ....
Eksempel CSS ...
# Meny {
margin: 0; padding: 0; bakgrunn: # FF9900;
list-style-type: none; width: 150px;
}
# Meny li {margin: 0; padding: 0;}
# Meny a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-høyde: 2,5; border-bottom: 1px solid # FFF;
}
Resultatene vil du se ...
Løsning for denne feilen ... (modifisert / lagt CSS i fet kursiv)
# Meny {
margin: 0; padding: 0; bakgrunn: # FF9900; list-style-type: none; width: 150px;
float: left; / * dette inneholder fløt listeelementer * /
}
# Meny li {
margin: 0; padding: 0;
float: left; / * Dette løser * /
width: 100%; / * whitespace bug i IE6 * /
}
# Meny a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-høyde: 2,5; border-bottom: 1px solid # FFF;
}
Hvis ovenstående løsningen doesnot synes å fungere (for grunner kjente til IE6 bare) ... prøve denne metoden i stedet
Bare legg denne ekstra IE6 bare stiler til markup din ...
<- [If lt IE 7>
<style type="text/css">
# Meny li a {display: inline-block;}
# Meny li a {display: block;}
</ Style>
<[Endif] ->
Innlegg IE 6, har MSIE vært snill nok til oss UI utviklere ved å legge noen flere CSS egenskaper standard til de fleste andre vanlige nettlesere. Et slikt nyttig eiendom i "min-height". Ganske rett frem eiendom som ikke trenger lang omstendelig forklaring. Når en min-høyde for en divisjon er satt, er det alltid beholder det settet høyden når innholdet huser opptar mindre enn den kan holde og viktigere (i motsetning til vanlig vanilla "høyde" eiendom) vekter eller i CSS ord, oppfører den som en divisjon som "høyde" er satt til "auto" ...
For noen av oss fattige utviklere, som fortsatt er nødvendig å kode CSS som også må jobbe i IE6, kunne un-tilgjengeligheten av "min-height", bevise en show stopper en gang ... donot fortvilelse.
Heldigvis har vi nok quirks i IE, at vi ville bruke til å ut nytte og hacke vår vei gjennom for å nå vårt mål ... dvs lage en DIVISION divisjon som om det min-høyden i IE6
Løsning 1: Bruk understrekingstegnet Hack [ ... Les mer ]
.box1 {
min-height: 200px;
height:auto;
_height:200px;
}HTML: -
<div class="box1">Some dynamic content with variable height ...</div>
Løsning 2: Bruke CSS Attributt 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 attributtvelger Hack utnytter det faktum at nettlesere tidligere tha IE6 ignorert en atribute-velgeren. Legg merke til kravet om en annen container divisjon med class = "someclass". Bare tilstedeværelse av klassen attributtet for denne divisjonen, overstyrer høyden tilbake til auto for Opera, Mozilla og MSIE7 og senere. IE6, som ikke støtter atribute velgere, ignorerer den.
Se demo av min høyde hack for IE6
Ved flere anledninger, mens de gjør sidelayouter med popup divisjoner / lysbokser / Tips osv. Vi kommer over situasjoner der noen form SELECT objekter skjer for å være under disse POPUP Divisjoner, ved design og det viser gjennom .... YUK!
Vel! du kan enkelt fikse dette ved å justere dine Z-indeksverdiene hensiktsmessig for FF og IE7. Men Good Old (pun intended) IE6 ikke oppfører seg som forutsatt .... SELECT BOX vises gjennom, selv etter at du har brukt noen drastisk høy Z-indeksverdiene til PopUp divisjon ... nei!!
Det finnes INGEN fikser for dette problemet, men det er, tror jeg, mer enn noen måte å jobbe-rundt dette problemet, men im her for å fortelle deg den enkleste løsningen som jeg bruker, som fungerer fint for meg, i det meste av saker ....
"HIDE THE ROUGE SELECT BOX når du viser POPUP"
Bare i skriptet tekstutdraget hvor du vise popup, legg et stykke skript for å sette synligheten av SELECT Box til "Hidden"
document.getElementById ('my_select') style.visibilty = "skjult".;
Og husk å sette den tilbake på LUKK av PopUp Division
. document.getElementById ('my_select') style.visibilty = "synlig";
der "my_select" er IDen til irritasjon SELECT Box
Håper dette hjelper ...
PS. Det finnes selvsagt andre alternativer som dynamisk positionining en IFRAME (samme størrelse som du PopUp) under Popup DIV ... Dette fungerer godt også, men med et tillegg av laster på DOM Elements, skript og hodepine. Jeg har brukt denne løsningen også, og hvis du trenger hjelp med dette alternativet, la meg vite. Vil gjerne hjelpe!
Noen måneder tidligere vi så, hvordan vi kan inkludere et stykke CSS som vil være synlig for IE6 bare ( For din IES Only ). Det finnes andre måter å oppnå dette så godt. Bare ta med en egen CSS, i henhold til mål IE. Dette kan oppnås med det som kalles som Betingede kommentarer.
Betingede Kommentarer er en måte å oppdage type nettleser og versjon. Nettleser deteksjon er utført for å sikre at innholdet presenteres for leseren bestemt. Browser deteksjon kan gjøres ved hjelp av mange forskjellige teknikker. Denne metoden har flere fordeler fremfor tidligere metoder, som inkluderte stil svitsjing med javascript. For å liste viktig få, vil være;
Hvordan gjør vi dette?
Gjør noe i IE 5 bare
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Gjør noe i alle IE-versjoner
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Gjør noe i alle IE-versjoner nyere som 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, les denne info på MSDN:
Om Betinget Kommentar
Hvis du har skrevet CSS for stund, ville du ha erfaring de gangene du bokstavelig talt trekke håret når CSS-layouter så fint i alle de nye nettlesere (jeg mener nettlesere senere enn IE6), men IE 6 kaster et raserianfall. Du strever hardt for å justere CSS, men det fungerer ikke ... Vel! Prøv disse hacks ...
1. Understreke Hack: -
Per definisjon kan CSS 2.1 spesifikasjon understrek ("_") i CSS identifikatorer. Men mange nettlesere fortsatt synes å ignorere ethvert identifiserer fortsatte med en understrek, men IE. Dette IE bug / funksjon blir dermed en veldig tydelig måte å sette CSS egenskaper for IES bare. så husk, A CSS eiendom skriftlig med understreking på start er synlig for Internet Explorer (alle versjoner, men IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}Se demonstrasjon av dette understreker hack
Også bruker min høyde hack for IE6 understrekingstegnet hack, sjekk ut
2. Hash (#) Hack: -
I likhet med understrek hack, er dette en altfor er for IES oly, med en god forskjell, er eiendom identifikatorer som innledes med # på starten synlig for alle IE-versjoner, inkludert IE7 og er usynlig for alle andre standard nettleser.
.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 for IE6 bare: -
#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 himmelen sendt, når ingenting annet fungerer ... Hvis noen av disse hacks sparer livet ditt en dag, ikke glem å behandle meg til en kopp kaffe :)
Jeg hadde dette problemet der, hvis du hadde en mouseover hendelse på en divisjon (DIV) og at divisjon, for noen god grunn måtte være gjennomsiktig (som i mitt tilfelle, der det var nødvendig å vise noen tags over et bilde på mouseover av dette gjennomsiktig divisjon), klarte ikke IE for å utløse mouseover arrangementet (fungerte fint i FireFox).
Prøvde flere alternativer ... mange av dem var bare et desperat forsøk på å få arrangementet til å skyte i IE. En av de fornuftige de, at jeg trodde kanskje virke var å sette en bakgrunnsfarge til divisjonen og sette opacity til null ... Vel! Dint arbeid!
Den endelige løsning som syntes å virke, og ikke forstyrre funksjonaliteten jeg som kreves var å sette en pixel gjentatt / gjennomsiktig bakgrunnsbilde i denne avdelingen
... Silly! men nå IE virker lykkelig.
Enkelt ... For å løse dette problemet bruk display: inline.
div {float:left;margin:40px;display:inline;}
Hvis du har en fløtet element som en div og plasserer deg margin høyre eller margin-venstre på dette elementet, vil Internet Explorer 6.0 dobbelte margin verdi, rote opp html / css layout. For å fikse dette ganske enkelt legge til skjerm: inline; til flytende element.
