Luges seda mõnel blogi ... arvasin, et see oli tore kataloogiin see tulevikus ref .... Samuti võib olla oluline intervjuus küsimusele, et teil oleks küsis ühel päeval ....
Lisan väljavõtte CSS, mis näitab lõikes sinine vanemate brauseritega, punane uuemad brauserid, roheline IE6 ja must IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
CSS mitte-IE brauseritega: Tema ei ole uudis, et CSS arendajatele, et CSS Child selektorid nagu näites ei tundu töötada IE.
nt div> span {mõned css}, mis tähendab "kui span element on laste (ja mitte lapselaps või suur grand laps jne) jagamine element".
Aga me kasutasime seda CON meie eelis. Ajalooliselt lapse valijat on kasutatud varjata CSS käsud IE. Lihtsalt pannes html>body ees mistahes CSS käsk IE ignoreerida:
html>body .foo { CSS commands go here ;}
See toimib, sest <body> on alati laps <html> - see võib muidugi kunagi lapselaps või lapse-lapselaps <html> .
Nüüd, kui IE 7 mõistab laps valijat, pead sisestada tühi comment tag vahetult pärast suurem kui märk. IE 7 siis ei mõista seda valijat (kes teab, miks!?) Ja on seega täiesti ignoreerida seda CSS käsk:
html> /**/ body .foo { CSS commands go here ;}
Kui pole veel näinud neid enne, on läbi lugeda järgmised samuti
Nagu ikka, üks paljudest mõned kummalised probleemid IE ja see peab auastmed TOP 10 IE quirks.
PROBLEEM ARUANNE (See oli minu probleem, võibolla on sarnased misbehaviors):
Mul on palju DIV on ka lehe klass "sectionhead", mis on vaid pealkirja osas lehel. Nii et ma olen mõned stiili vaadates näeb see
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}
Div on helehall bar mõned musta teksti. Mis juhtub IE on mõned neist jagu päised kuvatakse ok, kuid mõned on nähtamatu, seni, kuni te Lehel või klõpsake midagi lehel jne Mõnikord kipuvad nad kaovad, kui klõpsate "alt" klahvi, kui Page Down või liikuge koos kerimisriba. Mõnikord tundub taas, kui sa uuesti (F5) lehel. Ma lühikese täiesti lihtne DIV mõned lihtsad stiil käitub BAD.
Mis võib põhjustada sellise ettearvamatu käitumine? Hästi! Ausalt öeldes, ei tea!
VÕIMALIK LAHENDUS:
Jällegi ärge küsige minult, miks, kuid paljudel juhtudel see probleem kipub kaduma, kui lisate asukoht: võrreldes valesti käitub elementide stiili, nagu see
. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; seisukoht: suhteline}
Imelik, aga mida öelda? Jumal õnnistagu mind IE!
JA jagavad meiega, kui teil oli sarnaseid probleeme.
Kui teil on kunagi teinud (või tegemise 1) vertikaalne menüü abil loendiüksuste (li) sildid ja CSS, siis võib tekkida see järjekordne viga Internet Explorer, kus IE 6 lisab need erinevused loendiüksuste mis sisaldavad ploki taseme elementide st kui on tühik vahel Loendiüksused märgistuskeel. Thanks, kuid tänu IE versiooni 7 tundub vabaks see viga.
Kui meeldib mulle, ja palju muud, te kuulute sellesse bänd pettunud arendajad, kes on veel saada oma uue paigutusega, töötades IE6 liiga, siis see võib osutuda kasulikuks. Have a look ...
Proovi märgistuskeel:
<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> About </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> KKK </ a> </ li>
<li> <a href="#"> Kontakt </ a> </ li>
</ Ul>
Sa võid luua mõned CSS, mis on sarnane 1 alla, et transfrom eespool juurdehindlus sisse vertikaalne menüü ....
Proovi CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; laius: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu {kuva: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # fff;
}
Tulemused näed ...
Lahendus see viga ... (muudetud / lisatud CSS paksus kaldkirjas)
# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; laius: 150px;
float: left; / * see sisaldab paisati loendiüksuste * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * See fikseerib * /
Laius: 100%; / * tühik viga IE6 * /
}
# Menu {
kuva: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # fff;
}
Kui eespool esitatud lahust doesnot tunduda tööle (põhjustel teada IE6 ainult) ... proovida seda meetodit asemel
Lihtsalt lisada see täiendava IE6 ainult stiilide märgistuskeel ...
<! - [If lt IE 7>
<style type="text/css">
# Menu li {kuva: inline-block;}
# Menu li {kuva: block;}
</ Style>
<! [Endif] ->
Postitus IE 6, MSIE on nii lahke, et meid UI arendajad, lisades veel mõned CSS omadused standardi kõige muu standard brauseritega. Üks selline kasulikku vara "min-height". Väga lihtne vara, mis ei vaja pikka Hengästynyt selgitus. Kui min-kõrgus jagamine on seadistatud, siis alati jääb, et maa kõrgus, kui sisu seda maja võtab vähem kui see mahub ja tähtsam (erinevalt plain vanilla "height" vara) kaalud või CSS sõnadega, see käitub jagunemine, kelle "height" on seatud "auto" ...
Mõned meist kehv arendajad, kes ikka veel on vaja koodi CSS et peab töötama IE6, un-kättesaadavus "min-height", võib osutuda Näita korgi millalgi ... Donot meeleheidet.
Õnneks on meil piisavalt quirks IE, et me kasutame välja ära ja häkkida oma teed läbi, et jõuda meie eesmärk ... st teha DIVISION rajoon kuigi tema min-kõrgus IE6
Lahendus 1: Kasutades alakriips Hack [ ... Loe edasi ]
.box1 {
min-height: 200px;
height:auto;
_height:200px;
}HTML: -
<div class="box1">Some dynamic content with variable height ...</div>
Lahendus 2: Kasutades CSS omadus valija 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 omadus valija Hack ära asjaolu brauserid varem tha IE6 ignoreeritakse atribuudi-valijat. Märkus nõue teise konteinerisse osakonnale class = "someclass". Lihtsalt presense klassi atribuut selle jagunemine, alistab kõrgus tagasi auto jaoks Opera, Mozilla ja MSIE7 ja hiljem. IE6, mis ei toeta atribuuti selektorid, ignoreerib seda.
Vaata Demo on min-height hack jaoks IE6
Mitmel korral, tehes samal ajal lehe paigutusega popup osad / Valgusreklaam / Tips jne me kohanud olukordi, kus mingil kujul SELECT objektide juhtub olema nendel POPUP rajoonid, mille konstruktsioon ja see näitab läbi .... YUK!
Hästi! võid kergesti kindlaks see, korrigeerides oma Z-INDEX väärtused asjakohaselt FF ja IE7. Aga vana hea (pun mõeldud) IE6 ei käitu nagu ette nähtud .... SELECT BOX näitavad läbi, isegi pärast seda, kui kohaldatakse mõne drastiliselt kõrge Z-INDEX väärtusi oma PopUp Division ... kurb!!
On NO määratakse see probleem, kuid on olemas, ma usun, et rohkem kui paar teel tööle-ümber see probleem, kuid Im siin teile kõige lihtsam lahendus, et ma kasutan, mis töötab hästi minu jaoks, enamikus juhtudel ....
"Peida ROUGE SELECT kasti, siis sa NÄITA POPUP"
Lihtsalt oma skripti väljavõte, kus teil näidata oma popup, lisada tükk script määrata nähtavus SELECT Lahter "Varjatud"
document.getElementById ('my_select "). style.visibilty =" hidden ";
Ja pidage meeles, et seada see tagasi CLOSE oma PopUp osakond
document.getElementById ('my_select "). style.visibilty =" nähtav ";
kus "my_select" on ID ärritus SELECT Box
Loodan, et see aitab ...
PS. On loomulikult ka teisi võimalusi nagu dünaamiliselt positionining IFRAME (sama suur kui te PopUp) all Popup DIV ... See toimib hästi ka, aga lisamine koormate DOM Elements, skripte ja peavalu. Olen kasutanud seda lahendust ka ja kui sa vajad abi selle võimaluse, ärge andke mulle teada. On hea meel aidata!
Paar kuud varem nägime, kuidas me võiks hõlmata tükk CSS oleks nähtav IE6 ainult ( Teie te ainult ). On ka teisi võimalusi selle saavutamiseks samuti. Lihtsalt sisaldama eraldi CSS, konkreetselt teie eesmärk IE. seda on võimalik saavutada, mida on kutsutud Tingimuslik Kommentaarid.
Tingimuslik Kommentaarid on võimalus avastada brauseri tüüp ja versioon. Browser avastamiseks tehakse, et tagada sisu esitatakse brauseri konkreetne. Browser avastamine võib teha, kasutades erinevaid tehnikaid. See meetod on mitmeid eeliseid varasemate meetoditega, mis sisaldas style vahetamine, kasutades javascripti. Nimekirja tähtis vähe, oleks;
Kuidas seda teha?
Kas midagi IE 5 ainult
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Kas midagi kõik IE versioonid
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Kas midagi kõik IE versioonid uuemad mis IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->
Rohkem tingimisi vartiations, loe seda infot MSDN:
Umbes Tingimuslik kommentaar
Kui teil on kirjalikult CSS jaoks aega, siis oleks kogeda need ajad, kui sa sõna otseses mõttes tõmmata oma juukseid, kui teie CSS paigutust vaatas trahvi kõik uued brauserid (ma mõtlen brauserid hiljem kui IE6), aga IE 6 viskab pahur tuju. Sa võitlus raske muuta oma CSS aga see ei tööta ... Noh! Proovige Need Hacks ...
1. Alljoon Hack: -
Definitsiooni järgi CSS 2,1 spetsifikatsioon võimaldab alakriips ("_") CSS tunnused. Kuid paljud brauserid ikka tundub, et ignoreerida tuvastab jätkas alakriips kuid IE. See IE bug / funktsioon saab seega väga selge võimalus määrata CSS omadused te ainult. Seega pidage meeles, CSS vara kirjutatud alljoon start on nähtav Internet Explorer (kõik versioonid, kuid IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}Vaata tõend sellest alakriips hack
Ka min-height hack jaoks IE6 kasutab alakriips hack, vaadake
2. Hash (#) Hack: -
Nagu alakriips hack, see on liiga on IES oly, hea vahe, vara tunnuste eelne # start on nähtav kõigile IE versioone, IE7 hulka ja on nähtamatu muul standard brauser.
.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 jaoks IE6 vaid: -
#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*/
}
Need hacks tundub taevasse saata, kui midagi toimib ... Kui mõni neist hacks säästab teie elu kunagi, Ära unusta, et kohelda mind kohvi :)
Mul oli see probleem siis, kui teil oleks mouse üritus rajoon (DIV) ja et jaotus mingil mõjuval põhjusel pidi olema läbipaistev (nagu minu juhtumi puhul, kui oli vaja näidata mõned sildid üle pilt mouse of see läbipaistev osa), IE ei suutnud käivitada mouse sündmus (töötas trahvi Firefox).
Proovinud mitmeid võimalusi ... millest paljud oli lihtsalt meeleheitlik katse saada korral tulekahju IE. Üks mõistlik need, et ma arvasin võiks töötada oli seada taustavärvi jaotust ning määrata suitsususe nulli ... Noh! varal töö!
Lõplik lahendus, mis tundus, et töötada ja ei häiri funktsionaalsus mul vaja oli panna 1 pixel korrata / läbipaistev taustapilt selle jaotus
... Silly! kuid nüüd IE näib õnnelik.
Simple ... Probleemi lahendamiseks kasutatakse kuva: inline.
div {float:left;margin:40px;display:inline;}
Kui teil on paisati element nagu div ja paned margin-right või margin-vasakule, et element, Internet Explorer 6,0 kahekordistub et marginaali väärtus, messing up html / css layout. Määrata see lihtsalt lisada kuva: inline; oma ujuv element.
