2008 Okt 10 2008
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
walang mga komentaryo | tags: IE bug , IE Pag-aayos , ang IE Hacks IE Isyu |-post sa mga Browser Quirks , CSS
2008 Okt 4 2008
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.
walang mga komentaryo | tags: IE bug , IE Pag-aayos , ang IE Hacks IE Isyu |-post sa mga Browser Quirks , CSS , HTML
2008 Jul 15 2008
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!
walang mga komentaryo | tags: IE bug , IE Pag-aayos , ang mga IE Isyu , IE8 |-post sa mga Quirks ng Browser , CSS
2008 Jul 6 2008
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!
walang mga komentaryo | tags: IE bug , IE Isyu , IE8 |-post sa mga Quirks ng Browser , CSS
2008 Jun 20 2008
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] -!>
walang mga komentaryo | tags: IE bug , IE Pag-aayos , ang IE Hacks IE Isyu , IE6 , Tutorial |-post sa mga Quirks ng Browser , CSS
2008 Abr 12 2008
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
walang mga komentaryo | tags: IE bug , IE Pag-aayos , ang IE Hacks IE Isyu , IE6 , Tutorial |-post sa CSS
2008 Mar 15 2008
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!
walang mga komentaryo | tags: IE bug , IE Pag-aayos , ang IE Hacks IE Isyu , IE6 |-post sa mga Browser Quirks , CSS , HTML , JavasScript
2008 Jan 8 2008
Ang ilang buwan mas maaga namin nakita, kung paano namin maaaring magsama ng isang piraso ng CSS na makikita sa IE6 lamang ang ( Para sa iyong ngian lamang ). May mga iba pang mga paraan upang makamit ito pati na rin. Lamang na isama ang isang hiwalay na CSS, tiyak sa iyong target na IE. ito ay maaaring nakakamit sa kung ano ay tinatawag na bilang kondisyon Komento.
Kondisyon Komento ay isang paraan upang makita ang uri ng browser at bersyon. Browser detection ay ginanap upang matiyak na ang nilalaman ay nagpakita sa mismong browser. Browser detection ay maaaring gawin gamit ang maraming iba't-ibang pamamaraan. Ang pamamaraang ito ay may ilang mga pakinabang sa naunang pamamaraan, na kasama estilo Paglipat gamit ang javascript. Upang ilista mahalagang ilang, ay magiging;
- Scripting ay hindi kinakailangan
- Cross-browser
Paano namin gawin ito?
Gawin ang isang bagay sa IE 5 lamang
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Gawin ang isang bagay sa lahat ng mga IE bersyon
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Gawin ang isang bagay sa Lahat ng IE bersyon mas bagong na IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->
Para sa karagdagang kondisyon vartiations, basahin ang impormasyon sa MSDN:
Tungkol sa kondisyon Puna
walang mga komentaryo | tags: IE bug , IE Pag-aayos , ang IE Hacks IE Isyu |-post sa mga Browser Quirks , CSS , HTML , JavasScript
2007 Sep 8 2007
Kung ikaw ay sumusulat ng CSS para sa habang, ay mayroon kang makaranas ng mga beses kapag na literal hilahin ang iyong buhok kapag ang iyong CSS layout tumingin multa sa lahat ng mga bagong browser (ibig sabihin ko ng mga browser mamaya kaysa sa IE6), ngunit IE 6 throws isang alboroto. Kang magsumikap mahirap na ayusin ang iyong CSS ngunit ito ay hindi gumagana ... Well! Subukan ang mga HACKs ...
1. Salungguhit Hack: -
Sa pamamagitan ng kahulugan, CSS 2.1 detalye ay nagbibigay-daan sa salungguhit ("_") sa CSS identifier. Ngunit maraming mga browser pa rin tila na huwag pansinin ang anumang Kinikilala nagpatuloy na may salungguhit ngunit ie. Bug ito IE / tampok sa gayon ay nagiging isang malinaw na paraan upang itakda ang mga katangian ng CSS para sa ngian lamang. kaya tandaan, ang isang ari-arian ng CSS na nakasulat sa ang salungguhit sa simula ay makikita para sa Internet Explorer (lahat ng mga bersyon ngunit IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}
Tingnan ang pagpapakita ng salungguhit magtadtad
Gayundin, ang Ang min-taas pataga para sa IE6 gumagamit ng salungguhit magtadtad, tingnan ang
2. Hash (#) Hack: -
Tulad ng salungguhit magtadtad, isa na ito ay masyadong ay para sa ngian oly, na may isang mahusay na pagkakaiba, ari-arian identifier na preceded sa # sa simula ay makikita para sa Lahat ng mga bersyon ng IE, IE7 kasama at invisible para sa anumang iba pang mga karaniwang browser.
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}
Pataga na ito ay ginagamit mabuti upang ipakita ang isang krus browser vertical ihanay solusyon, tingnan ang artikulong ito upang makita ang aming higit
3. CSS para sa IE6 lamang: -
#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*/
}
Mga hacks tila langit na ipinadala, kapag walang ibang gumagana ... Kung ang anumang ng mga hacks ini-imbak ang iyong buhay sa ibang araw, wala kalimutan na ituturing ako sa isang coffee :)
walang mga komentaryo | tags: IE bug , IE Pag-aayos , ang IE Hacks IE Isyu |-post sa mga Quirks ng Browser , CSS , JavasScript
2007 Jul 12 2007
Nagkaroon ko ang problemang ito kung saan, kung mayroon kang isang ang mouseover kaganapan sa isang dibisyon (div) at na division, para sa ilang mga magandang dahilan ay upang maging transparent (Sa aking kaso, na kung saan ito ay kinakailangan upang ipakita ang ilang mga tag sa loob ng isang imahe sa mouseover ng ang transparent division na ito), IE ay nabigong mag-trigger ang kaganapan ng mouseover (nagtrabaho multa sa Firefox).
Sinubukan ilang mga pagpipilian ... marami na kung saan ay lamang ng isang desperado pagtatangka upang makuha ang kaganapan sa sunog sa IE. Isa ng ang mga makatwirang, na Akala ko maaaring gumana ay upang magtakda ng isang kulay ng background sa division at itakda ang opacity sa zero ... Well! yupi trabaho!
Ang huling solusyon na tila na magtrabaho at hindi abalahin ang pag-andar na ako kinakailangan ay upang ilagay ang isang pixel paulit-ulit / transparent na background imahe sa division na
... Ulok! ngunit ngayon IE Mukhang masaya.
walang mga komentaryo | tags: IE bug , IE Pag-aayos , ang IE Hacks IE Isyu |-post sa Quirks Browser
