Izsakot IT

Ja jūs skatāties šo lapu IE8, tad jums ir redzēt pilnu duļķainu baltu fonu aiz šo amatu. Vakar, mans collegue norādīja šo out man (kā es esmu viens no tiem cilvēkiem, kuri pielāgoties pārmaiņām lēni un vienmērīgi ... īpaši pārlūkiem. Varētu teikt, Im gļēvulis, bet tāpēc tā .... Būt UI izstrādātājs, es esmu vienmēr sūdi bail no jaunā pārlūka versiju ... jūs zināt, kādi Im tlaking par, labi?)

Digged ap laiku, cenšoties rast risinājumu, lai noteiktu to, un tad kāda ...
Šoreiz mūsu visu laiku mīļākā pārlūkprogrammai ir darījusi to visu atkal, krītot visu atbalstu CSS necaurredzamību. Nestandarta `filtrs: alfa (necaurredzamība = # #)` CSS atribūts ir atcelts, Nica, bet tie arī pilnīgi aizmirsa pievienot CSS3 apduļķojuma atbalstu (piemēram, kā visi citi pārlūka labi ir tur to). Tātad, pirmo reizi kopš Dievs mums pastāstīja par CSS necaurredzamība (kopš 5.0 IE, es domāju), interneta pārlūkprogramma neatbalsta CSS necaurredzamību.
Un tagad par krējumu virsū: Oficiālais vārds no 8 IE komandas? Tas ir "by design" un "mēs izskatīsim šo nākamajā versijā IE".

PS: Izmēģiniet šo lapu FF, zvēru tas izskatās glīts!

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] -!>

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;

• Skriptu nav vajadzīga
• Pārrobežu pārlūku

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

Vai esat ievērojuši, dažkārt, cik vienkāršas lietas vienkārši atsakās strādāt IE6 ... location.href ir tieši tāda lieta.

Ja esat pievienojis onclick funkcija jūsu enkura taga kā tālāk ...

<a href="javascript:void(0);" onclick="onClickLink('xxx');"> doties uz jauno atrašanās vietu </>

Ar kādu funkciju kā šo ...
funkcija onclickLink (id) {
var URI = "test2.html id =?" + id;
window.location.href = URI;
}

Uz savu ironiju, jūs ievērosiet, ka šāda vienkārša skriptu gabals atsakās strādāt IE ... Nu! Es varu apspriest iemeslus šeit, bet domāju, ka tas būs vērts ... Lai gan, man šķiet, ir risinājums ... (I bet, ja jūs saprotat Javascript, jūs sapratīsiet, kāpēc mēs pievienot šo iekniebt, lai IE6)

Risinājums

<a href="javascript:void(0);" onclick="onClickLink('xxx'); atgriešanās false; "> iet uz jauno atrašanās vietu </>

Ja jūs visi vienkārši atbildēt, lūdzu, rakstiet komentāru. Tas tiešām ir appretiated, es bet, ko daudzi!

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 */
}

Šis robs ir izmantots labi, lai pierādītu savstarpējās pārlūkprogrammu vertikāli saskaņot risinājumu, ir aplūkot šo rakstu, lai uzzinātu mūsu vairāk

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.