2008 10 Tet 2008

NUK Për IE Only - Selectors CSS fëmijë nuk punojnë në IE

CSS për jo-IE Browsers: Its asnjë lajm për zhvilluesit CSS se, Child Selectors CSS si shembull më poshtë, nuk duket për të punuar në IE.

p.sh. div> p {disa} css, që do të thotë "kur një element span është një fëmijë (dhe jo një nip ose fëmija i madh i madh etj), një element i ndarjes".

Por ne kemi përdorur këtë kontekst në avantazhin tonë. Historikisht, përzgjedhës fëmija ka qenë përdorur për të fshehur komandat CSS nga IE. Thjesht duke e vendosur html>body përpara çfarëdo IE komandës CSS do të injorojë atë:

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

Kjo punon sepse <body> është gjithmonë një fëmijë i <html> - ajo kurrë nuk mund sigurisht të jetë një nip apo stërnip i <html> .

Tani që IE 7 e kupton përzgjedhës fëmijës, ju duhet të futur një etiketë të zbrazët Komenti direkt pas i madh se shenjë IE 7 nuk do të kuptojnë këtë atëherë përzgjedhës (i cili e di pse!?) Dhe prandaj do të injorojë totalisht këtë komandë CSS.:

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

Nëse nuk e keni parë tashmë këto para, kanë një lexoni në vijim si dhe


2008 4 tetor 2008

Zhdukur HTML / DIV elemente në Internet Explorer [IE]

Si zakonisht, një nga disa probleme shumë të çuditshme me IE dhe këtë duhet të renditet në 10 TOP keto lojra fjalesh e IE.

DEKLARATË E PROBLEMIT (Ky ishte problemi im, ndoshta ju keni misbehaviors ngjashme):
Unë kam DIV shumë është në faqen me të klasës "sectionhead", që është asgjë, por titulli i një seksion në faqe. Pra, unë kam disa stil në kërkim si kjo

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

Div bar është një dritë gri me disa tekstin e zi. Çfarë ndodh në IE është disa prej këtyre headers seksion janë shfaqur ok, por disa janë të padukshme, derisa, ju shkoni faqe ose klikoni diçka në faqen etj Dikur ata kanë tendencë të zhduket kur ju klikoni me 'alt kyç kur ju faqe poshtë apo shkoni me bar scroll. Ata nganjëherë duket se rishfaqen kur ju ringarkoni (F5) faqen. I shkurtër një DIV krejtësisht i thjeshtë me një stil të thjeshtë sillet KEQ.
Çfarë mund të shkaktojnë sjellje të tillë një parregullt? E pra! Sinqerisht, NO IDEA!

Zgjidhje e mundshme:
Përsëri nuk do të më pyesni pse, por në shumë raste ky problem priret të zhduket kur ju të shtoni pozitën: në lidhje me sjellje të keq elementet e stilit, si kjo

. Sectionhead {font-size: 18px; background: # cfcfcf; mbushje: 5px; Pozita: relative}

I çuditshëm, por çfarë të thonë? Zoti i bekoftë mua nga IE!

DHE DO SHARE me SHBA, nëse keni pasur probleme të ngjashme.


2008 15 korrik 2008

IE 8 regjim i rreptë dhe errësirë ​​... Puna CSS Rreth

Oh well! Në postin e mëparshme disa ditë mbrapa në lidhje me perde në IE8, kam harruar të përmend një pikë e rëndësishme se "IE 8 regjim të rreptë nuk lejon CSS errësirë".
Për ata që donot kuptoni se çfarë dua të them me regjim të rreptë, këtu është tutorial shpejtë .

Një punë rreth kësaj (para se IE ekipit dev kuptojnë se ata kanë shtruar rrugën për ri-rutinat e punës në të gjithë botën, për web-faqet duke përdorur Pop-up lightboxes me disa perde, dhe e vuri përsëri mbështetjen për opacity) është që të përdorin një image gjysmë transparente ... mundësisht në formatin PNG (unë kam pasur përvojë të keqe për marrjen imazhe GIF transparente për të punuar si ata ishin menduar për të). Krijo një imazh PNG të ngjyrës dhe përqindja e transparencës që ju pëlqen, në ju redaktor preferuar image dhe e përdorin atë si një imazh sfond për mbulesë tuaj Lightbox.

dmth
Në vend të diçka si kjo

. Lighbox_overlay {
background-color: # ffffff;
z-index: 1001;
-Moz-errësirë: 0.6;
opacity: 0,60;
filter: alfa (opacity = 60);
}

A kjo ....

. Lighbox_overlay {
background: (bkg.png) url përsëritje;
}

Ta provoni, CLICK HERE! | Për të shkarkuar, CLICK HERE!


2008 6 korrik 2008

Jo "Opacity" në IE8

Nëse ju po shikojne kete faqe në IE8, atëherë ju duhet të shohim një sfond të errët të bardhë të plotë pas këtë post. Dje, collegue im vuri këtë, për mua (si unë jam një nga ata njerëz që përshtaten me ndryshimet ngadalë dhe në mënyrë të qëndrueshme ... sidomos shfletuesit. Mund të thonë, Im një frikacak, por në mënyrë të jetë ajo .... Duke qenë një zhvillues UI, unë jam gjithmonë mut i frikësuar nga versionet e shfletuesit të ri ... ju e dini se çfarë Im tlaking lidhje, apo jo?)

Gërmuar rreth e rrotull për kohë, duke u përpjekur për të gjetur një zgjidhje për të rregulluar atë dhe pastaj se çfarë ...
Këtë herë shfletuesi GJITHA jonë TIME preferuar ka bërë atë përsëri të gjithë duke rënë të gjithë mbështetjen për errësirë ​​CSS. Jo-standarde `filter: alfa (opacity = # #)` atribut CSS është hequr, Nice, por edhe krejtësisht të harruar të shtoni CSS3 mbështetje Patejdukshmërinë ashtu si dhe si të gjithë shfletuesit tjetër është e mirë kanë mbajtur atë në). Kështu, për herë të parë që Zoti na tha në lidhje me CSS perde (që nga viti IE 5.0, I guess), një shfletues web nuk do të mbështesë perde CSS.
Dhe tani për krem mbi krye: fjala zyrtare nga ekipi IE 8? Ajo është "me dashje" dhe "ne do të konsiderojë këtë në një version të ardhshëm të IE".

PS: Provoni këtë faqe në FF, betohem ai duket i zoti!


2008 20 qershor 2008

Bug White Space në Linjës / Lista e Artikujve (li) në IE6

Nëse ju keni bërë ndonjëherë (ose për të bërë një) Meny një vertikale duke përdorur sende të listës (li) tags dhe CSS, ju mund të hasni, kjo edhe një bug në Internet Explorer, ku IE 6 fut këto boshllëqe në mes të artikujve lista që përmbajnë elemente të nivelit të bllokojë, të dmth nëse ka ndonjë hapësira të bardha në mes të artikujve në listën Markup. Faleminderit, por jo falë, versioni i IE 7 duket të lirë nga ky bug.
Nëse si unë, dhe shumë më tepër, ju i përkasin këtij grupi të zhvilluesve të frustruar, të cilët ende kanë për të marrë Layouts e tyre të reja, duke punuar në IE6 shumë, atëherë kjo mund të provojë të dobishme. Have a look ...

Markup Shembull:

<ul id="menu">
<li> <a href="#"> Kryesore </ a> </ li>
<li> <a href="#"> Rreth </ a> </ li>
<li> <a href="#"> Shërbimet </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Na Kontaktoni </ a> </ li>
</ Ul>

Ju mund të krijojë disa CSS, të ngjashme me atë më poshtë, për të transfrom e Markup e mësipërme në një meny vertikale ....

Shembull CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-stolisje: none;
mbushje: 0 15px;
line-height: 2.5; kufirit-bottom: solid 1px # FFF;
}

Rezultatet e ju do të shihni ...
null

Zgjidhja për këtë bug ... (modifikuar / CSS shtuar në shkronja korsive të guximshme)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
noton: la; / * kjo përmban artikuj qarkulloi lista * /
}
# Menu li {
margin: 0; padding: 0;
noton: la, / * Kjo fixes * /
width: 100%; / * bug hapësira të bardha në IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-stolisje: none;
mbushje: 0 15px;
line-height: 2.5; kufirit-bottom: solid 1px # FFF;
}

Nëse doesnot lart zgjidhje duket për të punuar (për arsye të njohura për IE6 vetëm) ... provoni këtë metodë në vend

Vetëm të shtoni këtë shtesë stilet IE6 vetëm për të Markup tuaj ...

<- [Nëse lejtnant IE 7>
<style type="text/css">
# Menu li a {display: inline-bllok;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->


2008 12 prill 2008

Lartësia minimale CSS Cross Browser Hack

Posto IE 6, MSIE ka qenë e llojit të mjaftueshme për të na zhvilluesit UI duke shtuar një pak më shumë pronave CSS standarde në shumicën e shfletuesit të tjera standarde. Një pasuri e tillë i dobishëm në "min lartësi të". Prona mjaft i drejtë përpara që nuk ka nevojë për shpjegim të gjatë lodhshëm. Kur një min-height për një ndarje është vendosur, ai gjithmonë e mban atë lartësi të caktuar, kur përmbajtja e ajo shtëpi të zë më pak se ajo mund të mbajnë dhe e rëndësishmja (ndryshe nga thjeshtë vanilje "lartësi" të pronës) peshore apo me fjalë të CSS, ajo sillet si një Ndarja e të cilit "lartësi" është vendosur të "Auto" ...

Për disa prej nesh zhvilluesve të varfër, të cilët ende janë të nevojshme për kodin CSS që duhet gjithashtu të punojnë në IE6, un-disponueshmëria e "min-height", mund të provojë një tapë show diku ... dëshpërim donot.

Për fat të mirë, ne kemi quirks të mjaftueshme në IE, që ne do të përdorim në avantazhin jashtë dhe çajë rrugën tonë nëpërmjet të arritur qëllimin tonë ... dmth të bëjë një divizioni sikur i saj min-height në IE6

Zgjidhja 1: Përdorimi i fjalës Hack të theksuar ... Read more ]

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

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


Zgjidhja 2: Përdorimi i Selector atribut Hack CSS

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

Selector Attribute CSS Hack merr përparësi për faktin e shfletuesit IE6 më herët tha injoruar një atribute përzgjedhës-. Shënim kërkesat e një ndarjeje enë me class = "someclass". Vetëm presense e klasës atribut për këtë ndarje, refuzon lartësi përsëri në auto për Opera, Mozilla dhe MSIE7 dhe më vonë. IE6, e cila nuk e mbështet selectors atribute, e injoron atë.

Shiko Demo e hack min-height për IE6



2008 15 Mar 2008

Boxes irrituese Zgjidhni dukshme përmes Divizioneve Popup

Në disa raste, duke bërë Layouts faqe me ndarjet Popup / lightboxes / Këshilla etj ndeshemi me situata ku disa objekte Formoni SELECT ndodh të jetë nën këtyre Divizioneve popup, me dashje dhe kjo tregon përmes .... Yuk!

E pra! ju lehtë mund të rregullojmë këtë, duke rregulluar vlerat Z-index tuaja në mënyrë të përshtatshme për FF dhe IE7. Por mirë Vjetër (lojë fjalësh qëllim) IE6 nuk sillet si qëllim .... Emisioni SELECT BOX përmes, edhe pasi që ju aplikoni disa në mënyrë drastike të larta Z-index vlerave të Division tuaj Popup ... zhgënjim!

Nuk ka rregullime për këtë problem, por nuk janë, besoj, më shumë se një mënyrë pak për të punuar rreth këtij problemi, por Im këtu për t'ju thënë zgjidhje të thjeshtë që kam përdorur, i cili punon mirë për mua, në shumicën e raste ....

Msgstr "Fshih Kutin ZGJIDH Rouge kur ju tregoni Popup"

Thjesht në copë tuaj shkrimit ku ju tregoni popup tuaj, shtoni një pjesë e shkrimit për të vendosur dukshmërinë e Kutisë SELECT për të "fshehur"

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

Dhe mbani mend për të vendosur atë përsëri në fund të Divizionit tuaj Popup

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

ku "my_select" është ID e Kutisë acarim SELECT

Hope this helps ...

PS. Ka opsione të tjera si ofcourse dinamike positionining një (madhësia e njëjtë si ju Popup pëlqeu iframe nën DIV Popup ... Kjo punon shumë mirë, por me shtimin e ngarkesa të Elemente DOM, scripts dhe dhimbje koke. Unë kam përdorur këtë zgjidhje shumë, dhe nëse ju keni nevojë për ndonjë ndihmë me këtë opsion, nuk më lejoni të dinë. Do të jetë i gatshëm për ndihmë!


2008 Jan 8, 2008

Komentet e kushtëzuara: Për Duex IES tuaj Vetëm-Pjesa

Disa muaj më parë ne pamë, se si ne mund të përfshijë një copë CSS se do të jetë e dukshme për IE6 vetëm ( Për IES tuaj Vetëm ). Ka shumë mënyra të tjera për të arritur këtë si. Thjesht përfshijnë një CSS veçantë, specifik për IE tuaj të synuar. kjo mund të arrihet me atë që është quajtur si Komente kushtëzuese.

Komentet e kushtëzuara është një mënyrë për të zbuluar llojin e shfletuesit dhe versionin. Zbulimi Browser është kryer për të siguruar që përmbajtja e paraqitur me specifik shfletuesit. Zbulimi Browser mund të bëhet duke përdorur teknika të ndryshme. Kjo metodë ka disa avantazhe mbi metodat e mëparshme, që përfshihen switching stil duke përdorur JavaScript. Tek lista e rëndësishme pak, do të jetë;

  • Scripting nuk është e nevojshme
  • Cross-browser-

Si mund ta bëjmë këtë?

A diçka në IE 5 vetëm
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Bëjnë diçka në të gjitha versionet e IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Bëjnë diçka në të gjitha versionet më të reja se IE IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Për më shumë vartiations kushtëzuara, lexoni këtë informacion në MSDN:
Rreth Koment Kushtëzuar


2007 8 shtator 2007

Për IES tuaj Only

Nëse ju keni qenë i shkruar CSS për kohë, ju do të keni përjetojnë ato raste kur ju vërtetë tërheq flokët tuaj kur Layouts CSS tuaja shikoi gjobë në të gjithë shfletuesit e reja (i thotë shfletuesit më vonë se IE6), por IE 6 hedh një zemërim i çastit. Ju luftuan për të rregulluar CSS tuaj, por ai nuk punon ... pra! Provoni këto hacks ...

1. Nënvizojnë Hack: -
Nga përkufizimi, CSS 2.1 specifikim lejon të theksuar ("_") në identifikuesit CSS. Por shfletues shumë ende duket të injorojë çdo identifikon vazhdoi me një nënvizuar por IE. Bug Kete IE-së / funksion bëhet kështu një mënyrë shumë të qartë për të vendosur për pronat CSS IES vetëm. Pra mbani mend, një pronë CSS shkrim me pah në fillim është e dukshme për Internet Explorer (të gjitha versionet, por IE 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

Shiko demonstrim i kësaj nënvizojnë hack

Gjithashtu, min-height hack për IE6 përdor hack të theksuar, shikoni


2. (#) Hash Hack: -
Ashtu si nënvizojnë hack, kjo është shumë është për IES OLY, me një ndryshim të mirë, identifikuesit e pronës paraprirë me # në fillim është e dukshme për të gjitha versionet e IE, IE7 përfshirë dhe është e padukshme për çdo shfletues tjetër standarde.

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}

Ky hack është përdorur mirë për të demonstruar një shfletues kryq vertikale align zgjidhje, kanë një vështrim në këtë artikull për të gjetur më shumë jonë


3. CSS për IE6 vetëm: -
#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*/
}

Këto hacks duket qielli dërgoi, kur asgjë tjetër nuk punon ... Nëse ndonjë nga këto hacks kursen jetën tuaj një ditë, dont harroni të trajtuar mua për një kafe shtypurit


2007 12 korrik 2007

Kalo miun kompjuterik mbi ngjarje në një ndarje transparente në IE

Kam pasur këtë problem, ku, nëse keni pasur një ngjarje Kalo miun kompjuterik mbi mbi një ndarje (DIV) dhe atë ndarje, për disa arsye të mirë duhej të jetë transparente (si në rastin tim, ku u kërkohet të shfaqë disa etiketa mbi një imazh më Kalo miun kompjuterik mbi të kjo ndarje transparente), IE ka dështuar për të shkaktuar ngjarjen Kalo miun kompjuterik mbi simbolit ka punuar mirë në Firefox).

Opsionet provuar disa ... shumë prej të cilave ishte vetëm një përpjekje e dëshpëruar për të marrë ngjarje të zjarrit në IE. Një nga ato të ndjeshme, që kam menduar mund të punojnë ishte për të vendosur një background të ndarjes dhe vendosur perde në zero ... E pra! yxhym punën!

Zgjidhja përfundimtare e cila dukej për të punuar dhe të mos prishin funksionalitetin e kam kërkuar ishte për të vënë një piksel një përsëriti / image background transparent në atë ndarje

... Silly! por tani IE duket i lumtur.


NDK shtëpi | Duke shprehur IT | qiellëz shprehur | Penmenship shprehur | frikë shprehur | shprehur Myself