Bija lasījis šo dažās blogā ... domāju, tas bija jauki, lai katalogā šis nākotnes ref .... arī varētu būt svarīgs intervija jautājums, ko jūs lūdza kādu dienu ....
Uzrakstiet fragmentu CSS, kas parādīs rindkopu zilā in vecākām pārlūkprogrammām, sarkanā jaunāku pārlūkprogrammu, zaļš IE6 un melns 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 pārlūkprogrammu: Tā nav ziņa CSS izstrādātājiem, kas, CSS Bērnu selektori kā piemēru zemāk, nešķiet strādāt IE.
piemēram div> span {daži css}, kas nozīmē "ja span elements ir bērns (un NAV mazbērns vai mazmazbērniem bērns utt) kādas nodaļas elementa".
Bet mēs izmantojām šo CON mūsu labā. Vēsturiski, bērns selektors ir izmantots, lai slēptu CSS komandas no IE. Vienkārši ievietojot html>body priekšā jebkurā CSS komandu IE būs ignorēt to:
html>body .foo { CSS commands go here ;}
Tas darbojas, jo <body> vienmēr bērns <html> - tas, protams, var nekad ir mazbērns vai mazmazbērns no <html> .
Tagad, 7 IE saprot bērnu atlasītāju, jums ir jāievieto tukšu komentāru taga tieši pēc lielāka par zīmi 7 IE tad nesaprot šo pogu (kas zina, kāpēc!?), Un tāpēc pilnīgi ignorē šo CSS komandu.:
html> /**/ body .foo { CSS commands go here ;}
Ja vēl neesat redzējuši šo pirms, ir lasīt caur šīm, kā arī
Kā ierasts, viens no daudzajiem dīvainas problēmas ar IE, un tas viens ir ierindojas TOP 10 IE quirks.
Problēmas formulējums (Tas bija mana problēma, varbūt jums ir līdzīgi misbehaviors):
Man ir daudz DIV ir iekļauts lapā ar klasi "sectionhead", kas ir nekas, bet nosaukums sadaļu lapā. Tāpēc man ir daži stila meklēju kā šis
. Sectionhead {font-size: 18px; fons: # cfcfcf; padding: 5PX;}
Div ir gaiši pelēka josla ar kādu melnu tekstu. Kas notiek IE ir daži no šiem sadaļu galvenēs tiek rādīti ok, bet daži ir neredzami, kamēr jūs ritiniet lapu vai noklikšķiniet kaut uz lapas uc Dažkārt viņi mēdz pazust, kad jūs noklikšķiniet uz 'Alt' taustiņu, kad lapa uz leju vai ritiniet ar ritināšanas joslu. Tie dažreiz šķiet, atkal parādīties, kad esat papildināšanas (F5) lapu. Es īss perfekti vienkāršs DIV ar kādu vienkāršu stilu uzvedas slikti.
Kas varētu izraisīt šādu neparastus uzvedība? Labi! Atklāti sakot, Nav ideju!
IESPĒJAMĀ RISINĀJUMS:
Atkal neprasi man, kāpēc, bet daudzos gadījumos šī problēma mēdz pazust, kad jūs pievienot atrašanās vietai: salīdzinājumā ar MIS uzvedas elementi stilu, kā šis
. Sectionhead {font-size: 18px; fons: # cfcfcf; padding: 5PX; amats: relatīvais}
Dīvaini, bet ko teikt? Dievs svētī mani no IE!
UN vai dalīties ar ASV, Ja jums būtu ar līdzīgām problēmām.
Ja Jums kādreiz ir veikta (vai veicot kādu) Vertikālais Izvēlne izmantojot saraksta vienumus (LI) tagus un CSS, jūs varētu sastapties, šis vēl viens bug Internet Explorer, kur IE 6 ieliktņiem šie trūkumi starp saraksta elementiem, kas satur bloku līmeņa elementi un ti, ja pastāv kāds no saraksta vienumiem atzīmes atstarpes. Paldies, bet ne paldies, IE versiju 7 šķiet brīva no šo kļūdu.
Ja piemēram, man, un vēl daudz vairāk, jūs piederat pie šīs joslas neapmierināti izstrādātājiem, kuri vēl ir, lai saņemtu savu jauno izkārtojumu, darba IE6 pārāk, tad tas varētu izrādīties noderīga. Ieskaties ...
Paraugs atzīmes:
<ul id="menu">
<li> <a href="#"> Sākums </ a> </ li>
<li> <a href="#"> Par </> </ li>
<li> <a href="#"> Serviss </ a> </ li>
<li> <a href="#"> Portfolio </> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Sazinieties ar mums </ a> </ li>
</ Ul>
Jūs varētu izveidot kādu CSS, līdzīgi viens zem, lai transfrom iepriekšminēto atzīmes atgriezties vertikālā izvēlne ....
Paraugs CSS ...
# Menu {
margin: 0; padding: 0; fons: # FF9900;
saraksts stila tipa: none; platums: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu {display: block;
color: # 555.555;
text-decoration: none;
padding: 0 15px;
līnijas augstums: 2,5; robežu apakšā: 1px solid # FFF;
}
Rezultātus jūs redzēsiet ...
Risinājums šo kļūdu ... (mainīt / pievienot CSS treknā slīprakstā)
# Menu {
margin: 0; padding: 0; fons: # FF9900; saraksts stila tipa: none; platums: 150px;
float: left; / * tas satur sāniem piesaistītos saraksta elementus * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Šī gadam * /
platums: 100%; / * atstarpes kļūda IE6 * /
}
# Menu {
display: block; krāsa: # 555.555;
text-decoration: none;
padding: 0 15px;
līnijas augstums: 2,5; robežu apakšā: 1px solid # FFF;
}
Ja šāds risinājums doesnot šķiet darbs (tādu iemeslu dēļ zināmas IE6 tikai) ... izmēģiniet šo metodi, nevis
Vienkārši pievienojiet šo papildus IE6 tikai stilus jūsu atzīmes ...
<-! [Ja lt IE 7>
<style type="text/css">
# Menu li {display: inline-block;}
# Menu li {display: block;}
</ Style>
<[Endif] -!>
Nosūtīt IE 6, MSIE ir veida pietiekami, lai mums UI izstrādātāji, pievienojot vēl dažus CSS īpašības standarta vairumam citu standarta pārlūkprogrammu. Viens šāds Noderīga īpašums "min augstumā". Diezgan taisni uz priekšu īpašumu, kas nav vajadzīga ilgu aizdusu paskaidrojumus. Ja min-augstums rajons ir iestatīts, tas vienmēr saglabā šo noteikto augstumu, ja saturs tajā atrodas aizņem mazāk, nekā tā spēj turēt un galvenais (atšķirībā no parastā vaniļas "Augstums" īpašums) skalām vai CSS vārdiem, tā uzvedas nodaļa kuru "Augstums" ir iestatīts uz "AUTO" ...
Dažiem no mums nabadzīgo izstrādātājiem, kuri joprojām ir nepieciešami, lai kodu CSS, ka arī strādā IE6, ANO pieejamība "min-augstums", varētu izrādīties parādīt aizbāzni dažkārt ... donot izmisums.
Par laimi, mums ir pietiekami daudz quirks pārlūkā IE, ka mēs izmantojam, lai ārpus labā un kapāt mūsu ceļu cauri, lai sasniegtu savu mērķi ... tas padara SADALĪŠANAS rajons, kā arī tās min augstums IE6
Risinājums 1: Izmantojot pasvītrojuma Hack [ ... Lasīt vairāk ]
.box1 {
min-height: 200px;
height:auto;
_height:200px;
}HTML: -
<div class="box1">Some dynamic content with variable height ...</div>
Risinājums 2: Izmantojot CSS Atribūtu 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 atribūtu selektors Hack ņem priekšrocība ir fakts, ka pārlūki agrāk tha IE6 ignorēt kādu atribute-atlasītāja. Atzīmē prasību par citā traukā rajons ar class = "someclass". Tikai no klases atribūts šim rajons presense, tiek ignorēts augstumu atpakaļ uz Opera, Mozilla un MSIE7 auto un vēlāk. IE6, kas neatbalsta atribute šķirotāja, ignorē to.
Apskatīt demo min augstuma banalizēt IE6
Vairākkārt, bet dara lappušu izkārtojumus ar popup nodaļām / gaismas kastes / tips utt mēs nākam pāri gadījumos, kad daži Forma Atlasīt objektus notiek, ir saskaņā ar šiem PopUp nodaļās, kuru dizains un tas rāda caur .... Yuk!
Labi! Jūs varētu viegli noteikt šo, pielāgojot Z indeksa vērtības attiecīgi par FF un IE7. Bet labu veco (pun paredzēti) IE6 nav kā tas ir ieplānots .... SELECT BOX izstāde cauri, pat pēc tam, kad piemēro dažus krasi augstus Z indeksa vērtības jūsu PopUp nodaļa ... nejaukais!!
Nav šīs problēmas LABOJUMU, bet tur ir, es uzskatu, vairāk nekā pāris ceļā uz darbu ap šo problēmu, bet Im šeit, lai pastāstītu jums vienkāršāko risinājumu, ka es izmantot, kas darbojas sodanaudu mani, jo lielākā daļa lietas ....
"Paslēpt Reuges SELECT lodziņā, ja jums RĀDĪT POPUP"
Vienkārši jūsu skriptu fragmentu, kur jums parādīt jūsu uznirstošo logu, pievieno gabaliņu skriptu noteikt redzamību SELECT Box uz "Hidden"
document.getElementById ('my_select') style.visibilty = "hidden".;
Un atcerēties, lai uzstādītu to atpakaļ uz Aizvērt jūsu Popup nodaļas
document.getElementById ('my_select') style.visibilty = "redzama".;
kur "my_select" ir ID kairinājuma SELECT Box
Hope this helps ...
PS. Ir Protams citas iespējas, piemēram, dinamiski positionining iframe (tas pats izmērs kā Jums PopUp) ar Popup DIV ... Tas darbojas labi arī, bet ar papildus kravu ar DOM elementu, skripti un galvassāpes. Man ir izmantojis šo risinājumu pārāk, un ja jums nepieciešama palīdzība ar šo iespēju, es let me know. Būsim priecīgi palīdzēt!
Dažus mēnešus agrāk mēs redzējām, kā mēs varētu ietvert kādu CSS, kas būtu redzams uz IE6 tikai ( Jūsu IES Tikai ). Ir citi veidi, kā panākt to, kā labi. Vienkārši iekļaut atsevišķu CSS atbilstoši jūsu mērķa IE. to var panākt ar to, ko sauc par nosacīto Komentāri.
Nosacīti Komentāri ir veids, kā atklāt pārlūka veidu un versiju. Pārlūkprogramma atklāšana tiek veikta, lai nodrošinātu, ka sniegtais saturs pārlūkprogrammai īpatnībām. Pārlūku atklāšana var izdarīt, izmantojot dažādus paņēmienus. Šī metode ir vairākas priekšrocības salīdzinājumā ar iepriekšējām metodēm, kas iekļautas stila maiņu, izmantojot javascript. Uzskaitīt svarīgi maz, būtu;
Kā mēs to darām?
Darīt kaut 5 IE tikai
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Darīt kaut ko Visas IE versijās
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Darīt kaut ko Visas IE versijās jaunāku IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->
Vairāk nosacītas vartiations, izlasiet šo info par MSDN:
Par nosacītā Komentārs
Ja Jums ir rakstiski CSS laiku, jums būs pieredze tos laikus, kad jūs burtiski pull jūsu matu, kad jūsu CSS izkārtojumi izskatījās naudas sodu visās jaunajās pārlūkprogrammām (es domāju pārlūkus vēlāk kā IE6), bet 6 IE met dusmu lēkme. Jūs cīnīties grūti pielāgot savu CSS, taču tas nedarbojas ... Nu! Izmēģiniet šos Hacks ...
1. Uzsver Hack: -
Pēc definīcijas, 2,1 CSS specifikācija ļauj pasvītrojumu ("_"), kas CSS identifikatoru. Bet daudzi pārlūki joprojām šķiet ignorēt jebkuru identificē turpināja pasvītrojumu, bet IE. Šī IE kļūdu / funkcija tādējādi kļūst ļoti skaidrs veids, kā noteikt CSS īpašības IES tikai. tāpēc atcerieties, CSS īpašuma rakstisku ar pasvītrojumu uz sākuma ir redzams uz Internet Explorer (visas versijas, bet IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}Skats demonstrēt to uzsvērtu kapāt
Arī min augstums banalizēt IE6 lieto pasvītrojuma banalizēt, izbraukšana
2. Hash (#) Padomi: -
Tāpat pasvītrojumu banalizēt, šī ir pārāk ir IES oly, ar labu starpību, īpašuma identifikatoriem sākas ar # uz sākumu ir redzama visiem IE versijām, IE7 iekļauts un ir neredzams citiem standarta pārlūkprogrammu.
.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 par IE6 tikai: -
#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*/
}
Šie hacks šķiet debesis nosūtīts, kad nekas cits darbojas ... Ja kāds no šiem hacks saglabā savu dzīvi someday, neaizmirstiet, lai ārstētu mani uz kafiju :)
Man bija šī problēma, kur, ja Jums bija MouseOver notikumu par Division (DIV) un šo sadalījumu, kādu labu iemeslu bija jābūt pārredzamiem (kā manā gadījumā, kad tai tika pieprasīts, lai parādītu dažus tagus virs attēla pārvieto kursoru virs gada Šajā pārredzamajā nodaļa), IE neizdevās iedarbināt MouseOver notikumu (Strādājis naudas sodu FireFox).
Izmēģinātas vairākas iespējas ... no kuriem daudzi bija tikai izmisuma mēģinājums nokļūt notikuma uguns IE. Viens no saprātīgiem krāsām, ka es domāju, varētu strādāt bija noteikt fona krāsu dalīšanas un noteikt necaurredzamība līdz nullei ... Nu! iedobt darbu!
Galīgais risinājums, kas šķita strādāt un netraucē funkcionalitāti man nepieciešams bija likt vienu pikseli atkārtots / caurspīdīgs fona attēlu šajā nodaļā
... Dumjš! bet tagad IE šķiet laimīgi.
Vienkārši ... Lai labotu šo problēmu lietošanas displejs: inline.
div {float:left;margin:40px;display:inline;}
Ja jums ir piesaistītās elementu kā div un jums vietu starpība labo vai starpība kreiso pusi uz šī elementa, Internet Explorer 6,0 būs divkāršot starpības vērtību, messing up html / css izkārtojumu. Lai to novērstu vienkārši pievienot valodās: inline; jūsu peldošo elementu.
