2008 10. listopada 2008

Za NE samo za IE - CSS selektora Dijete ne rade u IE

CSS za Non-IE browserima: Njegova nije vijest za CSS developera koji, CSS djece selektora poput donjem primjeru, ne činiti se to funkcionirati u IE.

npr. div> {span neki css}, to znači da "kada span element dijete (a ne unuka ili veliki Grand dijete i sl.) od dijeljenja elementa".

Ali mi smo koristili ovaj CON u našu korist. Povijesno gledano, dijete izbornik se koristi za skrivanje CSS naredbe od IE. Jednostavno postavljanje html>body ispred bilo koje CSS zapovjedne IE će ga ignorirati:

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

Ovo funkcionira jer <body> je uvijek dijete <html> - može, naravno, nikada neće biti unuka ili praunuče od <html> .

Sada da IE 7 razumije dijete odabir, morate umetnite praznu komentarom u neposredno nakon što je veći od znaka IE 7 onda neće razumjeti ovaj odabir (tko zna zašto!), Te će stoga u potpunosti ignoriraju ovu CSS naredbu.:

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

Ako već niste vidjeli to i prije, imaju pročitajte sljedeće, kao i


2008 4. listopad 2008

Nestaju HTML / DIV elementi u Internet Explorer [IE]

Kao i obično, jedan od mnogih nekih čudnih problema sa IE i to se mora redova u TOP 10 u IE Igra riječima.

PROBLEM IZJAVA (Ovo je bio moj problem, možda imate slične misbehaviors):
Imam mnogo DIV je na stranici s klase "sectionhead", što je ništa drugo nego naslov dijela na stranici. Tako sam neki stil izgleda kao ovaj

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

Div je svijetlo siva bar s nekim crnim tekstom. Što se događa u IE je neke od tih sekcija zaglavlja prikazuju ok, ali neki su nevidljivi, sve dok se pomičete stranice ili kliknite na nešto na stranici itd. Negdje oni imaju tendenciju da nestanu kad kliknete na 'alt' ključ kada stranica dolje ili se pomaknite s trake za pomicanje. Oni se ponekad čini da se ponovno pojaviti kada se ponovno (F5) stranice. Sam kratko savršeno jednostavan DIV s nekim jednostavnim stilom ponaša loše.
Što bi moglo uzrokovati takvu čudno ponašanje? Dobro! Iskreno, pojma!!

MOGUĆE RJEŠENJE:
Opet ne pitajte me zašto, ali u mnogim slučajevima taj problem ima tendenciju da nestanu kada dodate Pozicija: u odnosu na prikrati ponašaju elementi stila, kao što je ovaj

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

Čudno, ali što reći? Bog Blagoslovi me od IE!

I DO Podijeli s SAD, ako je imao slične probleme.


2008 15. srpanj 2008

IE 8 strogi način rada i CSS opacity ... zaobišli

Oh dobro! U ranijem mjestu nekoliko dana vratiti u vezi Opacity u IE8, zaboravio sam spomenuti važnu točku koja "IE 8 strogi način rada ne dopušta CSS neprozirnosti".
Za one koji donot shvatiti što mislim pod strogom načinu rada, ovdje je brzi tutorial .

Rad oko toga (IE Prije dev tima shvaćaju da su utro put za re-radne rutine u cijelom svijetu, na web-stranice koriste Pop-up lightboxes s nekim neprozirnosti i vratiti podršku za Opacity) je koristiti polu transparentna slika ... po mogućnosti u PNG formatu (ja sam imao loše iskustvo uzimajući prozirne GIF slike na posao jer su trebali). Napravite PNG sliku u boji i postotak transparentnosti vam se sviđa, u vas omiljeni editor slika i koristiti ga kao pozadinsku sliku za vašu Lightbox sloj.

tj.
Umjesto da se nešto ovako

. Lighbox_overlay {
background-color: # FFFFFF;
z-index: 1001;
-Moz-opacity: 0,6;
opacity: 0,60;
filter: alpha (opacity = 60);
}

Učinite to ....

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

Da biste probali, kliknite ovdje! | za download, kliknite ovdje!


2008 6. srpanj 2008

Ne "Neprozirnost" u IE8

Ako gledate ovu stranicu u IE8, onda se mora vidjeti cijeli mutnu bijelu pozadinu iza ovog posta. Jučer, moj collegue istaknuo ovo za mene (kao što sam ja jedan od onih ljudi koji se prilagođavaju promjenama polako i odmjereno ... a posebno preglednicima. Moglo bi se reći, Im kukavica, ali tako bilo .... Budući da je UI developer, ja sam uvijek sranje prepala novih verzijama preglednika ... znate što Im tlaking o, zar ne?)

Iskopao oko za neko vrijeme, pokušava pronaći rješenje kako to popraviti, a zatim što ...
Ovaj put naš All Time Omiljeni browser je to učinio po cijelom ponovno pada sve podršku za CSS neprozirnosti. Nestandardnih `filter: alpha (opacity = # #),` CSS atribut je uklonjena, Nice, ali oni su također potpuno zaboravili dodati CSS3 neprozirnost potporu (kao kako su svi drugi preglednik lijepo ga je imati u). Dakle, za prvi put od nas je Bog rekao o CSS neprozirnosti (od IE 5.0, mislim), web preglednik neće podržati CSS neprozirnosti.
A sada za kreme na vrhu: Službeni riječ IE 8 momčadi? To je "namjerno" i "razmotrit ćemo to u buduće verzije IE".

PS: Pokušajte ovu stranicu u FF, zakleti da izgleda uredno!


2008 20. lipnja 2008

Bijeli prostor u Bug Line / Popis stavki (li) u IE6

Ako ste ikada napravio (ili stvaranje jednog) Vertikalni izbornik pomoću stavke popisa (li) oznake i CSS, možda ćete naići, ovo još jedan bug u programu Internet Explorer, gdje IE 6 umeće ove razlike između stavki popisa koje sadrže elemente blok razini, odnosno postoji li razmak između stavki popisa u oznake. Hvala, ali ne hvala, IE 7 verzija čini slobodnim od tog buga.
Ako poput mene, i još mnogo toga, što pripada ovom pojasu frustriranih programere, koji još uvijek moraju dobiti svoje nove izglede, koji rade u IE6 previše, onda bi to moglo biti korisno. Imati pogledati ...

Primjer za označavanje:

<ul id="menu">
<li> <a href="#"> Početna stranica </ a> </ li>
<li> <a href="#"> O </ a> </ li>
<li> <a href="#"> Usluge </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontaktirajte nas </ a> </ li>
</ Ul>

Možda stvoriti neki CSS, sličan jedan ispod, kako bi se transfrom iznad oznake u vertikalnom izborniku ....

Primjer CSS ...
# Izbornik {
margin: 0; padding: 0; background: # FF9900;
popis-style-type: none; širina: 150px;
}
# Izbornik li {margin: 0; padding: 0;}
# Izbornik {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-visina: 2,5; granični dna: 1px solid # FFF;
}

Rezultati ćete vidjeti ...
null

Rješenje za ovaj bug za ... promjene / dodaje CSS podebljano kurzivom)

# Izbornik {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; širina: 150px;
plovak: lijevo; / * ovo plutalo sadrži stavke popisa * /
}
# Izbornik {li
margin: 0; padding: 0;
plovak: lijevo; / * ovdje ispravci * /
širina: 100%; / * razmak bug u IE6 * /
}
# Izbornik {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-visina: 2,5; granični dna: 1px solid # FFF;
}

Ako gore navedeni rješenje doesnot činiti se to funkcionirati (iz razloga poznatih samo IE6) ... probati ovu metodu umjesto

Jednostavno dodajte ovaj dodatni IE6 samo stilove na oznake ...

<- [If IE 7 Lt>
<style type="text/css">
# Izbornik li {display: inline-block;}
# Izbornik li {display: block;}
</ Style>
<[Endif] ->


2008 12. travanj 2008

CSS križ Browser Najmanja visina Hack

Post IE 6, MSIE je rod dosta to nas UI programere dodavanjem još nekoliko CSS svojstava standardne za većinu ostalih standardnih preglednika. Jedan takav korisno svojstvo u "min-visine". Prilično ravno naprijed imovine koja ne treba dugo objašnjenje daha. Kad min visina za podjelu je postavljen, on uvijek zadržava taj skup visinu kada je sadržaj u njoj smješteni zauzima manje nego što može držati i najvažnije (za razliku od običnog vanilije "visina" imovina) skalama ili u CSS riječima, on se ponaša kao Podjela čiji "visina" je postavljena na "Auto" ...

Za neke od nas siromašnih developera, koji i dalje su potrebni za CSS koda koji također moraju raditi u IE6, ne-dostupnost "min-visina", mogao bi se pokazati čep emisiju negdje ... Donot očaj.

Srećom, imamo dovoljno Igra riječima u tj. da bismo koristiti za out prednosti i hack naš put kroz postići naš cilj ... odnosno napraviti Sektor kao da je njegova visina min-u IE6

Rješenje 1: Korištenje naglašavaju Hack [ ... Pročitajte više ]

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

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


Rješenje 2: Pomoću značajke za odabir CSS 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 značajke Odabir Hack uzima prednost činjenice preglednici ranije tha IE6 ignorirao je atribute-odabir. Napomena zahtjev druge podjele kontejnera s class = "someclass". Samo presense razreda atribut za ove oblasti, preskače visinu natrag u auto za Opera, Mozilla i MSIE7 i kasnije. IE6 koji ne podržava atribute selektora, ignorira.

Pogledajte demo min visina hack za IE6



2008 15. ožujka 2008

Odaberite iritantne Kutije vidljiv kroz popup odjeljenja

U nekoliko navrata, a radi izgleda stranice sa popup podjelama / lightboxes / Savjeti i sl. susrećemo se situacije u kojima neki oblik odabir objekata se dogoditi da se pod tim popup odjeljenja, po dizajnu i to pokazuje kroz .... Yuk!

Dobro! možete jednostavno popraviti podešavanjem Z-indeksa prikladno za FF i IE7. No Good Old (dosjetka namijenjen) IE6 ne ponaša onako kako smo zamislili .... SELECT BOX Prikaži putem, čak i nakon što primijeniti neke drastično visoke Z-indeksa za popup Odjel ... sori!!

Nema popravaka za ovaj problem, ali tu su, vjerujem, više od nekoliko putu do posla-oko ovog problema, ali im ovdje da vam reći najjednostavnije rješenje da sam koristiti, koji radi u redu za mene, u većini slučajevi ....

"Skrivanje BOX Rouge odabrati kada SHOW POPUP"

Jednostavno u vašoj skripti isječak gdje vam pokazati vaš popup, dodajte komad skripte za postavljanje vidljivost SELECT Box na "Hidden"

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

I ne zaboravite da ga vrati na kraju popup odjeljenja

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

gdje je "my_select" je ID od iritacije SELECT Box

Nadam se ovo pomaže ...

PS. Postoje ofcourse druge opcije kao što su dinamički positionining IFRAME (iste veličine kao što Popup) pod popup DIV ... To dobro radi previše, ali s dodatkom hrpe DOM elemenata, skripte i glavobolja. Koristio sam ovo rješenje također, a ako to učinite je potrebna pomoć s ovom opcijom, ne pustiti mene znati. Biti će nam drago pomoći!


2008 8 siječanj 2008

Uvjetno Komentari: Samo za vaše IES-dio Duex

Nekoliko mjeseci ranije, vidjeli smo, kako bismo mogli uključiti komad CSS koji će biti vidljiv samo IE6 ( Za vašu Samo IES ). Postoje i drugi načini za postizanje navedenog, kao dobro. Jednostavno su odvojeni CSS, specifične za ciljanu IE. To se može postići s onim što se zove kao uvjetnih komentara.

Uvjetno Komentari način otkriti vrstu preglednika i verziju. Browser detekcija se obavlja kako bi se osiguralo da je sadržaj predstavljen preglednika specifičan. Browser detekcija se može učiniti pomoću mnogo različitih tehnika. Ova metoda ima nekoliko prednosti nad ranijim metodama, što je uključivalo stil prebacivanja koristeći JavaScript. Za popis važno malo, bila bi;

  • Skriptiranje nije potreban
  • Cross-preglednik

Kako ćemo to učiniti?

Učinite nešto u IE 5 samo
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Učinite nešto u sve verzije IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Učinite nešto u sve novije verzije IE da IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Za više uvjetnih vartiations, pročitajte ove informacije na MSDN:
O Uvjetno Comment


2007 8. rujan 2007

Za vašu IES Samo

Ako ste pisanje CSS za neko vrijeme, te će morati doživjeti tih vremena kad doslovno vučenje tvoj kosa kada CSS layouts izgledao u redu u svim novim preglednicima (mislim preglednike najkasnije IE6), ali IE 6 baca tantrum. Vi se bore teško prilagoditi CSS, ali to ne radi ... Pa! Pokušajte ova hack ...

1. Naglašavaju Hack: -
Po definiciji, CSS 2,1 specifikacija omogućuje donja ("_") u CSS identifikatore. No, mnogi preglednici još uvijek izgleda da zanemari bilo identificira nastavila sa naglašavaju, ali IE. Ovaj je IE bug / značajka postaje vrlo jasan način postaviti CSS svojstva IES samo. pa ne zaboravite, CSS imovine pismeni s ističu na početku je vidljiv za Internet Explorer (sve verzije, ali IE 7)

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

Pogledajte demonstraciju ove naglašavaju hack

Također, min visine hack za IE6 koristi naglašavaju hack, check out


2. Hash (#) Hack: -
Kao donja hack, ovo je previše za oly IES, s dobrom razlikom, vlasništvo identifikatori prethodili s brojem na početku je vidljiv za sve verzije IE, IE7 uključen i je nevidljiv za bilo koji drugi standardni pregledniku.

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

Ovaj hack je korišten lijepo pokazati križ preglednik vertikalna uskladiti rješenje, pogledajte u ovom članku naći naše više


3. CSS za IE6 samo: -
#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*/
}

Ove hack čini Nebo, poslali, kad ništa drugo radi ... Ako bilo koji od tih hack štedi svoj život jednog dana, ne zaboravite da me tretiraju na kavu :)


2007 12. srpanj 2007

Prelazak mišem događaj na transparentan podjele u IE

Imao sam ovaj problem, gdje, ako ste imali Prelazak mišem događaj na podjele (DIV), te da podjela, za neki dobar razlog morao biti transparentan (kao u mom slučaju, gdje je potrebna za prikaz neke oznake preko slike na Prelazak mišem na ova transparentna podjela), IE nije uspio pokrenuti Prelazak mišem događaj (Radio Novčanom kaznom u Firefox).

Pokušao nekoliko opcija ... od kojih su mnogi bila samo očajnički pokušaj da se taj događaj na vatru u IE. Jedan od one, osjetljiv sam mislio da bi mogli raditi je postaviti boju pozadine u podjeli i postavljanje neprozirnosti na nulu ... dobro! DINT rad!

Konačno rješenje koje se činilo da rade, a ne remeti funkcionalnost mi je potrebno staviti jedan piksel ponoviti / transparentna pozadina slike u tom odjelu

Blesav ...! ali sada IE čini sretnim.


NDK dom | Izražavajući IT | Izražavajući Ukus | Izražavajući Penmenship | Izražavajući strahopoštovanje | Izražavajući Sebe