Čítal to v nejakom blogu ... myslel, že to bolo príjemné pre katalogizáciu to pre budúce čj .... Tiež by mohli byť dôležitým rozhovor otázkou, ktorou by sa spýtal jedného dňa ....
Napíšte fragment CSS, ktoré sa zobrazí v modrej odsek v starších prehliadačoch, červené v novších prehliadačoch, zelenej a čiernej IE6 v IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
CSS pre Non-IE prehliadačov: Jeho žiadne správy pre vývojárov, že CSS, CSS selektory deti ako na nižšie uvedenom príklade sa nezdá pracovať v IE.
napr div> p {} niektoré css, to znamená, že "keď span prvkom je dieťa (a nie vnuk alebo veľká slávnostná dieťa atď) z divízie prvku".
Ale sme použili tomto kontexte v náš prospech. Historicky, dieťa volič sa používa na skrytie CSS príkazy z IE. Jednoducho tým, že umiestnia html>body pred akoukoľvek CSS položku Internet Explorer bude ignorovať:
html>body .foo { CSS commands go here ;}
Toto pracuje, pretože <body> je vždy dieťa <html> - to možno samozrejme nikdy vnuk alebo pravnuk z <html> .
Teraz, že IE 7 chápe dieťa voliča, musíte vložiť prázdnu značku komentáre sa priamo po viac ako znamienko IE 7 potom nechápem tento volič (kto vie prečo!?), A bude teda úplne ignorovať tento príkaz CSS.:
html> /**/ body .foo { CSS commands go here ;}
Ak ste nedostali už videli tieto skôr, majú prečítajte si nasledujúce rovnako
Ako obvykle, jeden z mnohých niektoré podivné problémy s IE a to je potrebné pozícia v TOP 10 IE vtipov.
PROBLÉM VYHLÁSENIE (To bol môj problém, možno budete mať podobné misbehaviors):
Mám veľa DIV je na stránke s triedou "sectionhead", čo nie je nič iné ako názov oddielu na stránke. Tak som sa niektorí štýl vyzerať ako to
. Sectionhead {font-size: 18px; pozadia: # cfcfcf, padding: 5px;}
Div je svetlo šedá lišta s nejakým čiernym textom. Čo sa stane v IE je niektoré z týchto sekcií záhlaví sú zobrazené v poriadku, ale niektoré sú neviditeľné, kým nie, posúvanie stránky alebo kliknite niečo na stránke a pod Niekedy majú tendenciu miznúť, keď kliknite na tlačidlo 'alt' kľúč pri stránku dole alebo prejdite na posuvníka. Niekedy sa zdá sa objaviť, keď znova načítať (F5) stránku. Aj krátka dokonale jednoduché DIV s nejakým jednoduchým štýlom sa chová BAD.
Čo môže spôsobiť také nevyspytateľné správanie? No! Úprimne povedané, NO IDEA!
MOŽNÁ RIEŠENIE:
Opäť nepýtajte sa ma prečo, ale v mnohých prípadoch tento problém zvyčajne zmizne, keď pridáte pozície: vzhľadom k MIS chová prvkov štýlu, ako to
. Sectionhead {font-size: 18px; pozadia: # cfcfcf, padding: 5px; pozície: relatívna}
Divne, ale čo na to povedať? God Bless ma IE!
A DO Zdieľať s USA, ak by ste mali podobné problémy.
Ak ste niekedy robil alebo ods robiť jedného) vertikálne menu pomocou položky zoznamu (LI) tagy a CSS, môže dôjsť, to ďalšia chyba v Internet Exploreri, kde IE 6 vloží tieto medzery medzi položkami zoznamu, ktoré obsahujú prvky na úrovni bloku a tj ak existuje medzera medzi položkami zoznamu na značky. Vďaka, ale nie vďaka, verzia IE 7, zdá sa z tohto problému.
Pokiaľ sa rovnako ako ja a mnoho ďalších, patríte do tejto skupiny frustrovaných vývojárov, ktorí ešte majú dostať svoje nové rozvrhnutie, pracujúci v IE6 príliš, potom by to mohlo byť užitočné. Pozrite sa ...
Ukážka značky:
<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> O </ a> </ li>
<li> <a href="#"> služby </ a> </ li>
<li> <a href="#"> portfólio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontaktujte nás </ a> </ li>
</ Ul>
Môžete si vytvoriť nejaké CSS, podobne ako ten dole, aby transfrom vyššie uvedené značky do zvislej ponuke ....
Ukážka CSS ...
# Menu {
margin: 0; padding: 0; pozadia: # FF9900;
list-style-type: none; šírka: 150px;
}
# Menu Ak {margin: 0; padding: 0;}
# Menu {display: block;
color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # FFF;
}
Výsledky uvidíte ...
Riešenie tejto chyby ... (upravené / pridaná CSS tučnou kurzívou)
# Menu {
margin: 0; padding: 0; pozadia: # FF9900; list-style-type: none; šírka: 150px;
float: left; / * toto obsahuje plávajúcich položky zoznamu * /
}
# Menu Ak {
margin: 0; padding: 0;
float: left; / * Tento opravy * /
šírka: 100%; / * medzera chyba v IE6 * /
}
# Menu {
display: block; color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # FFF;
}
Ak vyššie uvedené riešenie doesnot Zdá sa, že práca (z dôvodov známych iba IE6) ... skúste túto metódu miesto
Stačí pridať tento ďalší IE6 iba štýly do značky ...
<- [Ak lt IE 7>
<style type="text/css">
# Menu Ak {display: inline-block;}
# Menu Ak {display: block;}
</ Div>
<[Endif] ->
Príspevok IE 6, MSIE bol taký láskavý, že nám UI vývojárov tým, že pridá ešte niekoľko ďalších vlastností CSS štandardné pre väčšinu ostatných štandardných prehliadačov. Jeden taký užitočné majetok "min-height". Docela rovno vpred majetok, ktorý nepotrebuje dlhú zubořezu vysvetlenie. Ak je nastavená min-height pre rozdelenie, vždy si zachováva nastavenú výšku, že keď obsah je tu zaberá menej ako to môže mať a hlavne (na rozdiel od plain vanilla "Height" majetku) váhy, alebo v slovách CSS, chová sa ako divízie ktorých "výška" je nastavený na "AUTO" ...
Pre niektoré z nás chudobných vývojárov, ktorí ešte sú nutné pre CSS kód, ktorý musí tiež pracovať v IE6, by ne-dostupnosť "min-height", ukázať show zátky niekedy ... donot zúfalstva.
Našťastie máme dosť vtipy v IE, ktoré by sme použili na von výhodu a zaseknúť našu cestu k dosiahnutiu nášho cieľa ... teda urobiť Oddelenie Oddelenie, ako by jeho min-height v IE6
Riešenie 1: Použitie Podtržítkový hack [ ... Prečítajte si viac ]
.box1 {
min-height: 200px;
height:auto;
_height:200px;
}HTML: -
<div class="box1">Some dynamic content with variable height ...</div>
Riešenie 2: pomocou atribútu CSS hack Selector
.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>
Atribút CSS Selector Hack využíva skutočnosť, že starší prehliadača IE6 tha ignoroval atribútom voliča. Na vedomie, že iné rozdelenie kontajnera s class = "someclass". Len presense zo atribút class pre túto divíziu, prepíše výšky späť na auto pre Opera, Mozilla a MSIE7 a novšie. IE6, ktorý nepodporuje atribútom selektory, ignoruje ju.
Zobraziť ukážku z min-height hacku pre IE6
Na niekoľkých príležitostiach, zatiaľ čo robí rozvrhnutie stránok s vyskakovacie divíziou Lightbox / etc / Tipy dostávame do situácií, keď niektoré formulári vyberte objekty sa stane, že na základe týchto POPUP divízie, a to podľa návrhu presvitá .... Yuk!
No! môžete ľahko opraviť tým, že nastaví svoje Z-INDEX hodnoty primerane pre FF a IE7. Ale dobrý starý (slovná hračka určená) IE6 sa nespráva ako má .... SELECT BOX presvitať, a to aj po inštalácii niektoré výrazne vysoké hodnoty Z-INDEX na váš PopUp divízie ... Bummer!!
Tam sú NO OPRAVY tohto problému, ale tam sú, myslím, viac než pár spôsob obídenia tohto problému, ale im tu, aby som vám čo najjednoduchšie riešenie, ktoré ju používam, ktorý pracuje dobre pre mňa, vo väčšine prípadov ....
"Skryť ROUGE okne Vybrať KEĎ ZOBRAZIŤ POPUP"
Jednoducho v skripte úryvku, kde môžete ukázať svoje okno, pridajte kúsok skriptu nastaviť viditeľnosť SELECT políčko "Skrytý"
document.getElementById ('my_select ") style.visibilty =" skrytý ".;
A nezabudnite nastaviť späť na sklonku svojho PopUp divízie
. Document.getElementById ('my_select ") style.visibilty =" viditeľné ";
kde "my_select" je ID podráždenie okne Vybrať
Dúfam, že to pomôže ...
PS. Samozrejme existujú aj iné možnosti, ako je dynamicky positionining IFRAME (rovnaký rozmer ako ste popup) pod Popup DIV ... To dobre funguje taky, ale s prídavkom zaťaženia DOM elementov, Skripty a bolesť hlavy. Použil som toto riešenie príliš, a keď potrebujeme pomôcť s touto voľbou, dajte mi vedieť. Vám radi pomôžeme!
O niekoľko mesiacov skôr sme videli, ako sme ich mohli zaradiť kus CSS, ktorý by bol viditeľný iba IE6 ( Pre vašu IES Only ). Existujú aj iné spôsoby, ako to dosiahnuť tiež. Jednoducho obsahuje samostatnú CSS, špecifické pre vašu cieľovú IE. to by mohlo byť dosiahnuté s tým, čo sa nazýva ako Podmienené komentáre.
Podmienené komentáre je spôsob, ako detekovať typ prehliadača a verziu. Prehliadač Detekcia sa uskutočňuje s cieľom zabezpečiť, že obsah predložila konkrétne prehliadača. Detekcie prehľadávača možno vykonať pomocou mnohých rôznych techník. Táto metóda má niekoľko výhod oproti predchádzajúcej metódy, ktoré sú súčasťou štýlu prepínanie pomocou javascript. Ak chcete vypísať dôležité málo, bude;
Ako to urobíme?
Urobte niečo v IE 5 až
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Niečo urobiť vo všetkých verziách IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Niečo urobiť vo všetkých verziách IE novších že IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->
Pre viac podmienených vartiations, prečítajte si informácie na webe MSDN:
O podmienený komentár
Ak ste písali CSS pre dobu, mali by ste zažiť tie časy, kedy si doslova vytiahnuť vlasy, keď si rozvrhnutie CSS vyzerala dobre vo všetkých nových prehliadačoch (mám na mysli prehliadača neskôr ako IE6), ale IE 6 vyvolá hnev. Môžete bojovať, ťažko upraviť CSS, ale to nefunguje ... No! Skúste tieto hacky ...
1. Podtržítkový hack: -
Podľa definície, špecifikácia CSS 2.1 umožňuje podčiarkovník ("_") v identifikátoroch CSS. Ale mnoho prehliadačov sa zdá ignorovať akékoľvek identifikuje pristúpil podčiarknutie, ale IE. Tento IE chyba / vlastnosť sa tak stáva veľmi jasný spôsob, ako nastaviť vlastnosti CSS pre IES len. tak si pamätajte, vlastnosť CSS písaný s podčiarknikom na začiatku je vidieť pre Internet Explorer (všetky verzie, ale IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}Zobraziť ukážka toho podčiarkovníky hack
Tiež, min-height hack pre IE6 používa podčiarkovník hack, pozrite sa
2. Hash (#) Hack: -
Rovnako ako podčiarkovník hack, toto je moc je pre IES Oly, s dobrým rozdielom, majetkové identifikátory predchádza # na začiatku je viditeľná pre všetky verzie IE, IE7 zahrnuté a je neviditeľný pre akýkoľvek iný štandardný prehliadač.
.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 pre IE6 iba: -
#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*/
}
Tieto hacky sa zdá neba poslal, keď nič iného funguje ... Ak sa ktorýkoľvek z týchto hack šetrí váš život jedného dňa, nezabudnite so mnou na kávu :)
Mal som tento problém v prípade, ak by ste mali mouseover udalosť na delenie (DIV) a že rozdelenie z nejakého dobrého dôvodu musela byť transparentné (ako v mojom prípade, kde to bolo potrebné na zobrazenie niektorých značiek cez obrazu na mouseover z Tento transparentné rozdelenie), IE sa nepodarilo spustiť mouseover udalosť (pracoval pokutu vo Firefoxe).
Snažili niekoľko možností, ... z ktorých mnohé bol len zúfalý pokus dostať udalosť na oheň v IE. Jeden z tých rozumných, ktoré som si myslel, by mohlo fungovať je nastaviť farbu pozadia na rozdelenie a nastavte krytie na nulu ... No! dint prácu!
Konečné riešenie, ktorá sa zdala pracovať a nerušia funkciu som bol potrebný, aby sa jeden pixel opakovať / transparentný obrázok na pozadí v tomto oddelení
Hlúpe ...! ale teraz sa zdá IE šťastný.
Jednoduché ... Ak chcete tento problém použitie display: inline.
div {float:left;margin:40px;display:inline;}
Ak máte plávajúce prvok, ako je div, a umiestnite margin-right, alebo margin-left na tomto prvku, bude Internet Explorer 6.0 dvojnásobné rozpätie hodnotu, nekazia sa HTML / CSS layout. Na vyriešenie tohto problému stačí pridať display: inline; do plávajúceho prvku.
