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!


2008 08 tammikuu 2008

Ehdollinen Comments: Oman IEs Only-Osa Duex

Muutamaa kuukautta aiemmin näimme, miten voisimme myös pala CSS olisivat näkyy IE6 vain ( Oman IEs Only ). On muitakin tapoja tämän saavuttamiseksi samoin. Yksinkertaisesti kuuluu erillinen CSS, erityisesti oman tavoitteen IE. tämä voidaan saavuttaa, mitä kutsutaan Ehdolliset kommentit.

Ehdollinen Kommentit on tapa tunnistaa selaimen tyyppi ja versio. Selain ilmaisu suoritetaan sen varmistamiseksi, että sisältö esitetään Selainkohtaisia. Selain Ilmaisu voidaan suorittaa käyttäen monia erilaisia ​​menetelmiä. Tällä menetelmällä on useita etuja verrattuna aikaisemmin menetelmiä, jotka sisältyvät tyyli kytkentää käyttäen javascriptiä. Voit luetella tärkeitä harvat olisivat;

  • Scripting ei tarvita
  • Cross-selain

Miten teemme tämän?

Tee jotain IE 5 vain
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Tee jotain Kaikki IE versiot
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Tee jotain Kaikki IE versiot uudemmat, että IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Lisätietoja ehdollinen vartiations, lue tämä info on MSDN:
Tietoja Ehdollinen Kommentti


2007 08 syyskuu 2007

Oman IEs Only

Jos olet kirjoittanut CSS aikana, sinulla olisi kokemusta niistä hetkistä, kun kirjaimellisesti vetää hiukset kun CSS-asettelut näytti hienosti kaikissa uusissa selaimissa (en tarkoita selaimet myöhemmin kuin IE6), mutta IE 6 heittää kiukuttelu. Voit ponnistella täysillä muokata CSS, mutta se ei toimi ... No! Kokeile näitä hakata ...

1. Alaviiva Hack: -
Määritelmän mukaan CSS 2.1-spesifikaation ansiosta alaviiva ("_") CSS tunnisteet. Monet selaimet näyttävät yhä ohittaa kaikki tunnistaa eteni alaviivalla, mutta IE. Tämän IE: n vika / ominaisuus tulee siten hyvin selkeä tapa asettaa CSS ominaisuuksia IEs vain. niin muistakaa, CSS omaisuus kirjoitetaan alaviiva on alku näkyy Internet Explorerin (kaikki versiot, mutta IE 7)

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

Katso demo tästä alaviiva hakata

Myös min-height hakata IE6 käyttää alaviivoja hakata, tutustu


2. Hash (#) Hack: -
Kuten alaviiva hakata, tämä on liian on IEs oly, jossa hyvä ero, omaisuuden tunnisteet edeltänyt # on alku näkyy kaikille IE-versiot, IE7 mukana ja on näkymätön muihin vakio selaimella.

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

Tämä hakata on käytetty kauniisti osoittamaan risti selain pysty tasata ratkaisu, on tarkasteltava tämän artikkelin löydät enemmän


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

Nämä hakata näyttää taivaan lähetetään, kun mikään muu ei toimi ... Jos jokin näistä hakata tallentaa elämää joskus, älä unohda hoitaa minulle kahvia :)


2007 12 heinäkuu 2007

Mouseover tapahtuma avoimesti divisioonan IE

Minulla oli tämä ongelma, jos, jos sinulla olisi mouseover tapahtuma jako (DIV), ja tämän jaon, jostain hyvästä syystä piti olla läpinäkyvä (minun tapauksessani, jossa se oli velvollinen näyttämään joitakin tunnisteet päälle kuvan mouseover ja Tämä läpinäkyvä jako), IE ei laukaista mouseover tapahtuma (toimi hienosti Firefoxissa).

Yritti useita vaihtoehtoja ... joista monet oli vain epätoivoinen yritys saada tapahtumaan paloa IE. Yksi järkevä niitä, jotka ajattelin ehkä toimia oli asettaa taustavärin jako ja asetetaan peittävyys nolla ... No! kuhmu työtä!

Lopullinen liuos, joka tuntui toimivan eikä häiritä toiminnallisuutta I oli niin laittaa yhden pikselin toistuva / läpinäkyvä taustakuvan tämän jaon

... Silly! mutta nyt IE tuntuu onnellinen.


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