Pagpapahayag ng IT

Oras at muli, Kapag ang lahat ng iba pang mga browser na nakita upang kumilos bilang sinabi sa pamamagitan ng ang mga patakaran W3C, IE spirals out ka ng espiritu ng pag-unlad sa pamamagitan ng pagkahagis ng isang pag-aalboroto, na hindi mukhang magkaroon ng isang pag-aayos. Lamang tulad ng isa ay ang isyu na ito sa IE7.

Problema Pahayag:
Ako at kaya maaaring marami ng iba pang malubhang mga web developer napansin higit pa kaysa sa maraming mga isang beses, na kapag may nested sa kamay sa layout, sa pasadahan sa ilang mga link (anchor tag), na naglalaman ng lalagyan tila upang ilipat ang ilang mga pixels sa kanan . Sinubukan ko sa google na mga solusyon para sa mga isyu na ito, ngunit marahil ay hindi natagpuan ang anumang mga makatwirang sagot sa kung bakit at kapag ito nangyayari (na maaaring makatulong upang maiwasan ang isyu na ito mula sa nangyayari), kaya hindi ko nakita ang isang malinaw na solusyon sa problema ...

Posibleng Solusyon:
Sa labas ng karanasan, mayroon akong abiso 90% porsyento ng ibig sabihin ang mga oras, na ang isyu na ito ay naayos na sa pamamagitan ng pagdaragdag ng isang ari-arian ng mag-zoom sa CSS kahulugan ng di-behaving lalagyan ...

 # Somediv {
       zoom: 1;
 }

muli ang mga dahilan ay hindi maliwanag ... subukan ito ...
Ang ilang mga elemento sa IE ay may isang "hasLayout ng" ari-arian, na kung saan ay "totoo" sa pamamagitan ng default. Ang Maraming visual na mga pag-uugali ng CSS, halimbawa, ang isang alpha filter ay gumagana lamang sa isang sangkap na hasLayout. at ang {zoom: 1} ay tila upang bigyan ang mga elemento ng target hasLayout ari-arian .... Kapaki-pakinabang? Wala ako sa tingin ...

Ang mga ari-arian ng zoom ay tila suportado ng Chrome, ngunit ang paggamit nito yupi na tila sa gumawa magkano ang masama epekto sa aking layout ... subukan ito, Kung ito gumagana para sa iyo ... kung hindi, i-bookmark ang pahinang ito sa ilalim ng "dais CSS"

Pagsisimula ng Google ng isang kilusan na prompt mga tao sa tambakan ng basura IE6 ... Sa pamamagitan ng bugging IE6 gumagamit sa isang popup sa pahina ng pagkarga ... ay maaaring hindi isang magandang ideya ... pero pagiging isang UI developer, mayroon akong sumali sa band kariton ... isa mas mababa browser para sa akin ay mag-alala tungkol sa ... Paumanhin makasarili ito ay! ngunit ako ay isama ang javascript na ito ... (Subukan ang PAGE SA IE6) ...
Uy! at sa ang maliwanag na tala ... Tingnan ito ay isang pagpapakita ng kapangyarihan ng JavaScript .... maaari itong dalhin kahit isang higanteng (o kapag ito ay)

KAYA ... Tulong mapupuksa ang mundo ng IE6 sa isang linya ng javascript!

http://code.google.com/p/sevenup/

Kung ikaw ay ang css tao, alam mo ang sakit sa pagkuha ng iyong mga layout gumagana ang cross-browser. IE8 ay isa pang spanner sa gumagana para sa amin mga developer. Anywaz! kung pinindot ninyo sa isyung ito, Tulad ko kahapon, kung saan ang iyong ganap na gumagana ang CSS sa IE7 (at mas maaga) at Firefox ay biglang nagsimula pagkahagis ang mga tantrums sa IE8, subukan ito ... mabuti Ito tila upang ayusin ang aking mga problema para sa mga sandali ....

Paggamit ng Meta pahayag, maaari naming tukuyin ang rendering engine gusto naming IE8 gamitin. Kaya pilitin IE8 sa render ng IE7 ... Ipasok ang sumusunod na meta tag sa head ng iyong dokumento: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Sa pamamagitan ng default IE Meta ay: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
na kung saan ay gumawa ng mga IE8 render ang pahina gamit ang bagong mga pamantayan ng mode.

Kung kinakailangan, ang syntax na ito ay maaaring gamitin upang accomodate para sa iba pang mga browser tulad ng sa ibaba:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

KARAGDAGANG sa Tungkol DOCTYPES:

KUNG ikaw ay pa pamilyar sa ng uri ng hayop na tinatawag na "Doctype" ... dito ay ang ilang mabilis na basahin
Ano ang DOCTYPES? Ano ang mga mga browser QUIRKS & MAHIGPIT Mode?
Pagtatakda ng DOCTYPE sa XSL

Para sa isang mas malalalim na-unawa tungkol sa DOCTYPES, subukan ang pagbisita sa mga link na ito ...
Listahan Bukod: Ayusin ang Iyong Site Gamit ang right DOCTYPE!
A List na Bukod: Higit pa na DOCTYPE: Web Standards, Ipasa Kakayahan, at IE8

Tandaan: Kahit na marami sa atin HTML / CSS tao ay neglecting ang kahalagahan ng DOCTYPE decleration sa aming mga dokumento, Pagtatakda ng tamang DOCTYPE, ay karaniwang ang sagot sa pinaka krus isyu browser.

CSS para sa mga Non-IE Browser: Ang walang balita sa CSS developer na, CSS Selectors Bata tulad ng halimbawa sa ibaba, Mukhang hindi gumagana sa IE.

hal div> span {ilang css}, na nangangahulugan na "kapag ang isang elemento ng span ay isang bata (at HINDI isang apo o malaking maharlika anak atbp) ng isang sangkap ng division".

Ngunit ginagamit namin ito salungat sa aming kalamangan. Kasaysayan, ng bata pili ay ginagamit upang itago ang mga utos ng CSS mula sa IE. Lamang sa pamamagitan ng paglalagay ng html>body sa harap ng anumang CSS utos IE ay huwag pansinin ito:

html>body .foo { CSS commands go here ;}

Ito gumagana dahil <body> ay palaging isang anak ng <html> - maaari itong siyempre hindi maging isang apo o apo sa tuhod ng <html> .

Ngayon na ang IE 7 ay nauunawaan ng bata selector, kailangan mong magpasok ng isang walang laman na tag ng komento sa direkta pagkatapos ng mas malaki kaysa sa pag-sign IE 7 ay hindi maunawaan na ito selector (na alam kung bakit!?) At samakatuwid lubos na huwag pansinin ang utos ng CSS.:

html> /**/ body .foo { CSS commands go here ;}

Kung hindi pa nakikita ang mga bago, magkaroon ng isang read sa pamamagitan ng mga sumusunod na pati na rin

• Kondisyon Comments: Para sa ang iyong Duex ngian lamang-Bahagi
• CSS pataga: Javascript, CSS, HTML para sa Firefox lamang
• Para sa iyong ngian lamang

Gaya ng dati, isa sa sa maraming mga ilang kakaibang mga problema sa IE at ito ay dapat na ranks sa TOP 10 ng IE Quirks.

Ang PROBLEMA pahayag (ito ay ang aking problema, maaaring mayroon kang katulad misbehaviors):
Mayroon akong maraming div sa pahina sa klase sa "sectionhead", kung saan ay walang anuman kundi pamagat ng isang seksyon sa pahina. Kaya ko na ang estilo ng ilang mga naghahanap na tulad nito

. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px;}

Ang div ay isang liwanag na kulay-abo ng bar na may ilang mga itim na teksto. Ano ang mangyayari sa IE ay ang ilan sa mga header ng seksyon na ito ay ipinapakita ok, ngunit ang ilang mga invisible, HANGGANG, mag-scroll mo ang pahina o i-click ang isang bagay sa ang pahina atbp minsan malamang sila upang mawala kapag nag-click ang 'alt' key kapag pahina ng pababa o mag-scroll sa scroll bar. Mukhang sila minsan sa lumitaw na muli kapag ikaw ay i-reload (F5) ang pahina. Akong maikling lubos simpleng div na may ilang simpleng estilo behaves masama.
Ano ang maaaring maging sanhi ng tulad ng isang mali-mali pag-uugali? Na rin! Lantaran, WALANG IDEA!!!

Posibleng solusyon:
Muli ko hindi na akong tatanungin kung bakit, ngunit sa maraming pagkakataon ang problemang ito ay may upang maglaho kapag nagdagdag ka ng position: may kaugnayan sa mis behaving elemento estilo, tulad nito

. Sectionhead {font-size: 18px; background: # cfcfcf; padding: 5px; posisyon: kamag-anak}

Kakaiba ngunit kung ano ang sinasabi? Diyos pagpalain ako mula sa IE!

AT MERON Ibahagi sa US, kung mayroon kang katulad na problema.

Oh Well! Sa ang mas maaga post ng ilang araw na pabalik tungkol Opacity sa IE8, Nakalimutan ko ang sa banggitin ang isang mahalagang punto na "IE 8 mahigpit na mode ay hindi pinapayagan para sa CSS opacity".
Para sa mga donot maunawaan kung ano ang ibig sabihin ko sa pamamagitan ng mahigpit na mode, dito ay mabilis na tutorial .

Ang isang trabaho sa paligid na ito (Bago IE dev koponan nauunawaan na mayroon silang ng aspaltado paraan para sa mga muling-trabaho gawain sa buong mundo, para sa mga web-site na gumagamit ng mga Pop-up na lightboxes sa ilang mga opacity, at ibalik suporta para sa opacity) ay gumamit ng isang semi transparent imahe ... mas mabuti sa PNG format (ako ay may masamang karanasan nakakakuha ng transparent GIF larawan upang magtrabaho bilang sila ay dapat na). Lumikha ng isang PNG na imahe ng kulay at porsyento ng transparency gusto mo, sa iyo paboritong editor ng imahe at gamitin ito bilang isang imahe sa background para sa iyong lightbox overlay.

ibig sabihin
Sa halip ng isang bagay tulad nito

. Lighbox_overlay {
background-kulay: # ffffff;
z-index: 1001;
-Moz-kalabuan: 0.6;
opacity: .60;
filter: alpha (opacity = 60);
}

Gawin ito ....

. Lighbox_overlay {
background: url (bkg.png) repeat;
}

Upang subukan ito, CLICK HERE! | SA DOWNLOAD, CLICK HERE!

Kung ikaw ay tumitingin sa pahina sa IE8, pagkatapos ay dapat ikaw ay nakakakita ng isang buong opaque na puting background sa likod ng post na ito. Kahapon, ang aking collegue itinuturo ito sa akin (Bilang ako ng mga tao na umangkop sa mga pagbabago sa dahan-dahan at steadily ... lalo na browser. Maaaring sabihin, Im isang bahag ang buntot, ngunit kaya ito .... Ang pagiging isang UI developer, ako palagi tae natakot ng bagong bersyon ng browser ... alam mo kung ano ang IM tlaking tungkol sa, i-right?)

Digged sa paligid para sa mga habang, sinusubukan upang makahanap ng solusyon upang ayusin ito at pagkatapos ay kung ano ang ...
Oras na ito ang aming LAHAT NG TIME FAVOURITE browser ay tapos na ang lahat ng ito muli sa pamamagitan ng bumababa lahat ng suporta para sa CSS opacity. Ang non-standard na `filter: alpha (opacity = # #)` CSS attribute ay tinanggal, Nice, ngunit sila rin lubos nakalimutan upang magdagdag ng CSS3 suporta ng opacity (tulad ng kung paano ang lahat ng iba pang mga browser ay mabuti na manatili ito sa). Kaya, sa unang pagkakataon dahil sinabi ng Diyos sa amin tungkol sa CSS opacity (dahil IE 5.0, hulaan ko), isang web browser ay hindi sumusuporta sa CSS opacity.
At ngayon para sa mga cream sa tuktok: Opisyal na salita mula sa IE 8 koponan? Ito ay "sa pamamagitan ng disenyo" at "namin isaalang-alang ito sa isang hinaharap na bersyon ng IE".

PS: Subukan ang pahinang ito sa FF, isumpa ito hitsura malinis!

Kung kailanman na ginawa mo (o paggawa ng isa) isang Vertical Menu paggamit ng mga item sa listahan (li) na mga tag at CSS, maaaring nakatagpo ka, ang isa pang bug sa Internet Explorer, kung saan IE 6 pagsingit sa mga gaps sa pagitan ng mga item sa listahan na naglalaman ng mga bloke ng mga elemento antas, ie kung may anumang whitespace sa pagitan ng mga item sa listahan sa markup. Salamat, ngunit walang mga salamat, ang mga bersyon ng IE 7 ay tila libre mula sa bug na ito.
Kung tulad ng sa akin, at mas maraming, nabibilang ka sa band ng mga bigo developer, na mayroon pa rin upang makakuha ng kanilang mga bagong layout, nagtatrabaho sa IE6 masyadong, pagkatapos ito ay maaaring patunayan ang kapaki-pakinabang. Tingnan ang ...

Sample markup:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Tungkol </ a> </ li>
<li> <a href="#"> Serbisyo </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Makipag-ugnay sa Amin </ a> </ li>
</ Ul>

Maaari kang lumikha ng ilang mga CSS, katulad sa isa sa ibaba, sa transfrom sa itaas markup sa isang vertical menu ....

Sample CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
listahan-estilo-uri: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu ng {display: block;
kulay: # 555,555;
text-dekorasyon: none;
padding: 0 15px;
linya-taas: 2.5; hangganan-ilalim: 1px solid # FFF;
}

Ang mga resulta ay makikita mo ...

Solusyon para sa mga ito bug ... (binago / idinagdag CSS sa bold italics)

# Menu {
margin: 0; padding: 0; background: # FF9900; listahan-estilo-uri: none; width: 150px;
Float: kaliwa; / * ito ay naglalaman ng ang floated item listahan ng * /
}
# Menu li {
margin: 0; padding: 0;
Float: kaliwa; / * ito pag-aayos ng * /
lapad: 100%; / * ang whitespace bug sa IE6 * /
}
# Menu {
display: block; kulay: # 555,555;
text-dekorasyon: none;
padding: 0 15px;
linya-taas: 2.5; hangganan-ilalim: 1px solid # FFF;
}

Kung sa itaas doesnot na solusyon tila sa trabaho (para sa mga dahilan na kilala sa IE6 lamang) ... subukan ang paraan na ito sa halip

Idagdag lamang ang mga ito ng karagdagang IE6 lamang mga estilo sa iyong markup ...

<-! [Kung lt IE 7>
<style type="text/css">
# Menu li isang {display: inline-block;}
# Menu li isang {display: block;}
</ Estilo>
<[Endif] -!>

Mag-post ng IE 6, MSIE ay uri sapat na sa amin UI developer sa pamamagitan ng pagdagdag ng ilang mga katangian ng CSS pamantayan sa mga pinaka-iba pang mga karaniwang browser. Isa tulad usefull ari-arian sa "min-taas". Medyo tuwid forward ari-arian na nangangailangan ng walang mahaba paghinga paliwanag. Kapag ang isang min-taas para sa isang dibisyon ay naka-set, laging Pinapanatili na taas ng hanay kapag ang nilalaman nito bahay sumasakop mas mababa kaysa sa maaari itong hawakan at mahalaga (hindi katulad ng plain na ari-arian ng banilya "taas") kaliskis o sa CSS salita, ito behaves tulad ng isang dibisyon na ang "taas" ay naka-set sa "auto" ...

Para sa ilan sa atin mahirap developer, sino pa rin ay kinakailangan upang code CSS na dapat ding magtrabaho sa IE6, ang di-pagkakaroon ng "min-taas", ay maaaring patunayan ng isang ipakita ang pasak minsan ... Donot kawalan ng pag-asa.

Sa kabutihang palad, mayroon kaming sapat na mga quirks sa IE, na gusto naming gamitin ang kalamangan at Hack aming paraan sa pamamagitan upang maabot ang aming layunin ... ibig sabihin gumawa ng isang dibisyon ng Division na tila ang min-taas sa IE6

Solusyon 1: Gamit ang salungguhit Hack [ ... Magbasa pa ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Solusyon 2: Paggamit ng CSS selector Hack Attribute

.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>


Ang CSS Hack Attribute selector ay tumatagal ng bentahe ng ang katunayan na ang browser na mas maaga tha na IE6 bahala isang atribute-pili. Tandaan ang mga kinakailangan ng isa pang lalagyan ng division sa klase na "someclass" =. Lamang ang presense ng klase ng katangian para sa dibisyon, overrides ang taas pabalik sa auto para sa Opera, Mozilla at MSIE7 na at mamaya. IE6, kung saan ay hindi sumusuporta sa selectors atribute, pinapansin ito.

Tingnan ang Demo ng min-taas pataga para sa IE6

Sa ilang mga okasyon, habang ginagawa ng mga layout ng pahina na may mga popup dibisyon / lightboxes na / Tips atbp namin dumating sa sitwasyon kung saan ang ilang Form na piliin ang mga bagay ang mangyayari sa ilalim ng mga popup dibisyon, sa pamamagitan ng disenyo at nagpapakita ito sa pamamagitan ng .... YUK!!!

Na rin! maaaring madali mong ayusin ito sa pamamagitan ng pag-aayos ng iyong mga Z-INDEX halaga naaangkop para sa FF at IE7. Ngunit Magandang Lumang (magbigay ng isang patudyong salita inilaan) IE6 ay hindi kumilos bilang nilayon .... Ang Piliin ang Ipakita ang kahon sa pamamagitan ng, kahit na matapos mag-apply ka ng ilang husto mataas na Z-INDEX na halaga sa iyong popup Division ... Nakakainis!!!!

May mga WALANG mga pag-aayos para sa problemang ito, ngunit may mga, tingin ko, higit pa kaysa sa ilang mga paraan upang gumana sa paligid ang problemang ito, Ngunit Im dito upang sabihin sa iyo ang pinakasimpleng solusyon na gamitin ko, na gumagana multa para sa akin, sa karamihan ng kaso ....

"Itago ang kahon ng Rouge piliin kung kailan IPAKITA MO ang popup"

Lamang sa iyong snippet ng script kung saan ipakita mo ang iyong popup, magdagdag ng isang piraso ng script upang itakda ang visibility ng Piliin ang Box sa "Mga Nakatagong"

document.getElementById ('my_select') style.visibilty = "nakatagong".;

At tandaan upang itakda ang mga ito pabalik sa Isara ng iyong popup Division

. document.getElementById ('my_select') style.visibilty = "nakikita";

kung saan sa "my_select" ay ang ID ng pangangati Piliin ang Box

Sana ito ay makakatulong ...

PS. May ofcourse iba pang mga pagpipilian tulad ng dynamic positionining isang iframe (parehong laki bilang ka popup) sa ilalim ng Popup div ... na ito ay mahusay na gumagana masyadong, ngunit may isang karagdagan ng mga naglo-load ng mga Sangkap ng DOM, mga script at sakit ng ulo. Ginamit ko na ang solusyon na ito masyadong, at Kung kailangan mo ng anumang tulong sa mga pagpipiliang ito, huwag ipagbigay alam sa akin. Ay natutuwa upang makatulong!