2009 07 marraskuu 2009

CSS ZOOM - Yet Another IE omituisuus; 3 pikseli

Aika ja uudelleen, kun kaikki muut selaimet nähdään käyttäytymään kertonut W3C sääntöjä, IE kierukoiksi teidät kehittämisen henkeä heittämällä kiukuttelu, joka ei näytä olevan korjauksen. Vain tällainen yksi tämän asian IE7.

Ongelma Statement:
Minä ja niin saattaisi monet muita vakavia web-kehittäjät ovat huomanneet yli monta kertaa, että kun pesi kelluu ulkoasun puolesta leijailla yli linkkejä (ankkuri tunnisteet), joka sisältää kontti näyttää siirtää muutaman pikselin oikealle . Olen yrittänyt google ratkaisuvaihtoehtoja, mutta on tuskin löytänyt mitään kohtuullista vastausta, miksi ja milloin se tapahtuu (jotka voivat auttaa estämään tämän ongelman tapahtumasta), joten en ole koskaan löytänyt yksiselitteistä vastausta ongelmaan joko ...

Mahdollinen ratkaisu:
Ei kokemusta, minulla on ilmoituksen 90% prosenttia kertoja eli että tämä ongelma on korjattu lisäämällä zoom kiinteistön CSS määritelmän väärin käyttäytyy kontti ...

 # Somediv {
       zoom: 1;
 }

jälleen syyt ovat epäselviä ... kokeile ...
Joitakin elementtejä IE on "hasLayout" omaisuus, joka on "tosi" oletuksena. Monet visuaalinen CSS käyttäytymistä, kuten alfa-suodatin toimii vain osan, joka hasLayout. ja {Zoom: 1} näyttää antavan kohde elementtejä hasLayout omaisuutta .... Hyödyllisiä? I dont ajatella niin ...

Zoom ominaisuus on ilmeisesti myös tuetaan Chrome, mutta sen käyttö dint näytä tekevän paljon haittaa minun layout ... kokeilla, jos se toimii sinulle ... jos se ei ole, kirjanmerkki tämä sivu alla "CSS craps"


2009 22 maaliskuu 2009

SevenUp! Kannusta maailma päästä eroon IE6!

Google aloittaa liike kannustaa ihmisiä upottaa IE6 ... By nakkaa IE6 käyttäjät POPUP sivulla kuorma ... ei välttämättä ole kovin hyvä idea ... mutta on UI kehittäjä, minun täytyy liittyä tämän bändin vaunun ... yksi vähemmän selainta minun huolehtia ... Anteeksi itsekäs se on! mutta olen myös tätä javascriptiä ... (TRY Tämän sivun IE6) ...
Hei! ja kirkkaampi huomautuksen ... Katso se näyttö POWER JavaScript .... se voi jopa kaataa jättiläinen (tai kun se oli)

SO ... Auta poistamaan maailmasta IE6 yhden rivin JavaScript!

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


2008 17 joulukuu 2008

Mis-käyttäytyy IE8: CSS Layout katkenneita (kohdistaminen selainversiota käyttäen meta IE8)

Jos olet css henkilö, tietäisit kipua saada teidän asettelut toimivat rajat selaimen. IE8 on jälleen kapuloita teokset meille kehittäjille. Anywaz! Jos osut tätä kysymystä, kuten tein eilen, missä täydellisesti toimivat CSS IE7 (ja aiemmin) ja Firefox on yhtäkkiä alkanut heittää kiukuttelut IE8, kokeile ... Se kauniisti näytti korjata ongelmani tällä hetkellä ....

Käyttämällä Meta ilmoitus, voimme määrittää renderoija haluaisimme IE8 käyttää. Joten pakottaa IE8 tehdä kuin IE7 ... Lisää seuraavat Metakoodi osaksi pään sinun asiakirjan: -

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

Oletuksena IE Meta olisivat: -

<META http-equiv="X-UA-Compatible" content="IE=8" />
mikä tekisi IE8 tehdä sivulle uusia standardeja tilassa.

Haluttaessa syntaksi voidaan käyttää mahtuu muiden selaimien kuten alla:

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


MORE About DOCTYPES:

Jos et vielä tunne sellaista eläintä nimeltään "DOCTYPE" ... tässä on muutamia nopeita lukea
Mitä DOCTYPES? Mitkä ovat selain koukero & STRICT tila?
Asettaminen DOCTYPE on XSL

Saat syvällisempi ymmärrys DOCTYPES, voit käydä nämä linkit ...
List Apart: Fix sivustosi oikea DOCTYPE!
List Apart: Beyond DOCTYPE: Web Standards, Forward Compatibility, ja IE8

Huomautus: Vaikka monet meistä HTML / CSS ihmiset ovat laiminlyönnistä merkitys DOCTYPE decleration meidän asiakirjojen asettaminen oikea DOCTYPE, yleensä vastauksen useimpiin eri selaimet.


2008 10 lokakuu 2008

EI IE Only - CSS Child valitsimet eivät toimi IE

CSS Non-IE: Sen ei uutisia CSS kehittäjät, CSS Child valitsimet, kuten alla olevassa esimerkissä, ei näytä toimivan IE.

esim. div> span {jotkut css}, joka tarkoittaa "Kun span elementti on lapsi (eikä lapsenlapsi tai suuren grand lapsi jne.) jako elementin".

Mutta me käytetään tätä CON eduksemme. Historiallisesti lapsi valitsin on käytetty piilottaa CSS komentoja IE. Yksinkertaisesti asettamalla html>body eteen CSS komennon IE jättää se:

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

Tämä toimii, koska <body> on aina lapsi <html> - voi tietenkään koskaan olla lapsenlapsi tai lapsenlapsen lapsi on <html> .

Nyt IE 7 ymmärtää lapsen valitsin, sinun täytyy lisätä tyhjän kommentin tagi heti suurempi kuin-merkki. IE 7 ei silloin ymmärrä tätä valitsin (kuka tietää miksi!?) Ja näin ollen täysin ohittaa tämän CSS komennon:

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

Jos ei ole jo nähnyt näitä ennen, on lukea läpi seuraavien samoin


2008 04 lokakuu 2008

Katoaminen HTML / DIV elementtien Internet Explorer [IE]

Kuten tavallista, yksi monista outoja ongelmia IE, ja tämä on riveissä TOP 10 IE oikkuja.

ONGELMA RAHOITUSLASKELMA (Tämä oli minun ongelmani, ehkä sinulla vastaavia misbehaviors):
Minulla on monia DIV se on sivun class "sectionhead", joka on vain otsikko osio sivulla. Olen siis tyyliä tämännäköistä

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

Div on kevyt harmaa palkki mustalla tekstillä. Mitä tapahtuu IE on joitakin näistä osien otsikot näkyvät ok, mutta jotkut ovat näkymättömiä, kunnes selaat sivulta tai klikkaa jotain sivun jne. Joskus ne häviävät yleensä, kun klikkaa "alt-näppäintä, kun sivu alas tai selaa kanssa vierityspalkkia. Ne joskus tuntua näkyviin, kun lataat (f5) sivulla. Olen lyhyt aivan yksinkertaista DIV hieman yksinkertainen tyyli toimii BAD.
Mikä voisi aiheuttaa niin arvaamaton käyttäytyminen? No! Suoraan sanottuna NO IDEA!

MAHDOLLINEN RATKAISU:
Jälleen älä kysy miksi, mutta monissa tapauksissa tämä ongelma yleensä katoaa, kun lisäät asema: suhteessa mis käyttäytyvät elementit tyyliin, tähän tapaan

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

Weird mutta mitä sanoa? Jumala siunaa minua IE!

Ja jaamme Yhdysvaltain, JOS oli samanlaisia ​​ongelmia.


2008 15 heinäkuu 2008

IE 8 tiukka tila ja CSS opasiteetti ... Workaround

Oh No! Kun aikaisemmin postitse muutaman päivän ajan suhteen Opasiteetti IE8, unohdin mainita tärkeän seikan, että "IE 8 tiukka tila ei salli CSS peittävyyttä".
Niille, jotka antaja ymmärtää mitä minä tarkoitan tiukka tila, tässä on nopeaa opetusohjelma .

Työtä noin tähän (ennen IE dev joukkue tajuaa, että ne ovat tasoittaneet tietä uudelleen työrutiineja ympäri maailmaa, web-sivustot käyttämällä Pop-up valopöytien joidenkin opasiteetti ja laita takaisin tuki opasiteetti) on käyttää puolittain läpinäkyvä kuva ... mieluiten PNG-muodossa (olen ollut huonoja kokemuksia saada läpinäkyvä GIF kuvia työskennellä heidän oletettiin). Luo PNG kuvan värin ja prosenttiosuus avoimuuden haluat, on sinun suosikki kuvankäsittelyohjelmassa ja käyttää sitä taustakuvan mediakorisi päällekkäin.

eli
Sen sijaan jotain tällaista

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

Tee näin ....

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

Kokeilla sitä, klikkaa tästä! | LATAAMISEEN, klikkaa tästä!


2008 06 heinäkuu 2008

Ei "Opasiteetti" IE8

Jos tarkastelet tämän sivun IE8, sinun täytyy nähdä koko läpinäkymätön valkoinen tausta takana tätä viestiä. Eilen minun työkaveri huomautti tästä minulle (Kuten olen yksi niistä ihmisistä, jotka sopeutumaan muutoksiin hitaasti ja tasaisesti ... varsinkin selaimilla. Voisi sanoa, Im pelkuri, mutta olkoon .... Koska käyttöliittymän kehittäjä, olen aina paska pelottaa selainten uusilla versioilla ... tiedätkö mitä Im tlaking siitä, eikö?)

Kaivoivat ympäriinsä samalla, yrittää löytää ratkaisun korjata ja mitä sitten ...
Tällä kertaa meidän JATKUVASTI SUOSIKKI selain on tehnyt sen uudestaan ​​jättämällä kaiken tuen CSS peittävyyttä. Epätyypilliset `filter: alpha (peittävyyden = # #)` CSS-ominaisuus on poistettu, Nizzassa, mutta myös täysin unohtanut lisätä CSS3 peittävyyden tuki (kuten kuinka kaikki muut selaimen hienosti pitänyt sitä). Niin, ensimmäistä kertaa sitten Jumala kertoi CSS peittävyyden (vuodesta IE 5.0, luulisin), Web-selain ei tue CSS peittävyyttä.
Ja nyt kerma päälle: Virallinen sana IE 8 joukkueen? Se on "suunniteltu" ja "me tämän huomioon tulevaisuudessa versio IE".

PS: Kokeile tämä sivu FF, vannon se näyttää siistiltä!


2008 20 kesäkuu 2008

White Space Bug in Line / luettelokohteet (li) ja IE6

Jos olet joskus tehnyt (tai toisten) Vertical valikon avulla luettelokohteita (li), tagit ja CSS, saatat kohdata, tämä taas yksi virhe Internet Explorerissa, kun IE 6 lisää nämä erot luettelosta kohteet, jotka sisältävät lohkoelementtien, eli jos on tyhjätilamerkit välillä luettelokohteita markup. Kiitos, mutta ei kiitos, IE 7-version näyttää vapaana tämän vian.
Jos kuten minä ja monet muut, kuulut tähän yhtye turhautuneet kehittäjät, joilla vielä on saada uusia ulkoasuja, jotka työskentelevät IE6 myös tämä voi osoittautua hyödylliseksi. Tutustu ...

Näyte markup:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Tietoa </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> Ohje </ a> </ li>
<li> <a href="#"> Ota yhteyttä </ a> </ li>
</ Ul>

Voit luoda joitain CSS, samanlainen kuin alla, jotta transfrom edellä markup tulee pystysuoraan menu ....

Näyte CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # fff;
}

Tulokset näet ...
null

Ratkaisu tämän vian ... (muutettu / lisätty CSS lihavoidulla kursiivilla)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * tämä on uittaa luettelokohteiden * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Tämä korjaa * /
leveys: 100%; / * välilyönnillä bugi IE6 * /
}
# Menu {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # fff;
}

Jos mainittu ratkaisu doesnot näytä toimivan (syistä tiedetään IE6 vain) ... kokeile tätä menetelmää sen sijaan

Lisää vain tämä ylimääräinen IE6 vain tyylejä markup ...

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


2008 12 huhtikuu 2008

CSS Cross Browser Minimikorkeus Hack

Viesti IE 6, MSIE on ystävällisesti meille UI kehittäjille lisäämällä muutaman CSS-ominaisuuksia vakiona useimpiin muihin standardin selaimilla. Eräs tällainen käytännöllinen omaisuutta "min-height". Aika suoraviivainen ominaisuus joka ei kaipaa pitkiä winded selitystä. Kun min korkeus jako on asetettu, se jää aina että joukko korkeudelle, kun sisältöä on talot vie vähemmän kuin sille mahtuu ja tärkeintä (toisin kuin plain vanilla "height" omaisuus) asteikkojen tai CSS sanoen, se käyttäytyy kuin jako, jonka "korkeus" on "auto" ...

Joillekin meistä huonon kehittäjille, jotka edelleen vaaditaan koodin CSS on työskenneltävä myös IE6, un-saatavuus "min-height" saattaa osoittautua näytä tulppa joskus ... antaja epätoivoon.

Onneksi meillä on tarpeeksi koukero IE, että voisimme käyttää pois etua ja hakata tiemme läpi saavuttaa tavoitteemme ... eli tehdä DIVISION divisioona ikään kuin sen min-height on IE6

Ratkaisu 1: Käyttämällä alaviivaa Hack [ ... Lue Lisää ]

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

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


Ratkaisu 2: Käyttämällä CSS ominaisuus valitsin 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 Määritteiden valitsin Hack hyödyntää siitä selaimet aiemmin tha IE6 sivuuttaa atribute-valitsin. Huomaa vaatimus toiseen astiaan rajapinnan class = "jokinLuokka". Vain presense luokan attribuutin Tämän jaon, ohittaa korkeus takaisin auto, Opera, Mozilla ja MSIE7 ja myöhemmin. IE6, joka ei tue atribute valitsimet, ohittaa sen.

Katso esittely ja min-height hakata IE6



2008 15 maaliskuu 2008

Ärsyttää Valitse laatikot näkyy läpi Popup alueet

Useasti, kun teet sivuasettelut kanssa popup osastojen / valopöytien / Vinkkejä jne. Olemme törmänneet tilanteisiin, joissa jonkinlainen Valitse objektit sattuu olemaan näissä POPUP toimialojen suunniteltu ja se näkyy läpi .... Yök!

No! voit helposti korjata tämän muuttamalla Z-indeksin arvot asianmukaisesti FF ja IE7. Mutta Good Old (pun tarkoitettu) IE6 ei toimi tarkoitetulla tavalla .... SELECT BOX näkyy läpi, vaikka asentamisen jälkeen jotkut rajusti korkea Z-INDEX arvoja ponnahdusikkunoiden Division ... Bummer!!

EI ole PISTEET tähän ongelmaan, mutta uskoakseni enemmän kuin muutama työmatka-kiertää tämän ongelman, mutta Im täällä kertoa yksinkertaisin ratkaisu, jota käytän, joka toimii hyvin minulle, useimmissa tapauksissa ....

"Piilota ROUGE SELECT BOX Kun näytät POPUP"

Yksinkertaisesti sinun script katkelmassa, jossa näytät popup, lisää pala käsikirjoituksen asettaa näkyvyyttä SELECT Box on "näkymätön"

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

Muista asettaa se takaisin päättyessä ponnahdusikkunoiden Division

document.getElementById ("my_select '). style.visibilty =" näkyvä ";

missä "my_select" on tunnus ärsytystä SELECT Box

Toivottavasti tämä auttaa ...

PS. On tietysti muita vaihtoehtoja, kuten dynaamisesti positionining IFRAME (samaa kokoa kuin sinä PopUp) mukaan Popup DIV ... Tämä toimii hyvin myös, mutta lisätty kuormien DOM Elements, skriptit ja päänsärky. Olen käyttänyt tätä ratkaisua myös, ja jos et tarvitse mitään apua tämän vaihtoehdon, älä kerro minulle. On ilo auttaa!


NDK home | Ilmaiseminen IT | ilmaiseminen Palate | ilmaiseminen Penmenship | ilmaiseminen Awe | ilmaista itseäni