2008 Október 10, 2008

NEM csak IE - Gyermek CSS Selectors nem működik IE-ben

CSS nem IE böngészők: A hír az, hogy a fejlesztők CSS, CSS Selectors gyermek, mint az alábbi példa, úgy tűnik, nem működik IE-ben.

pl div> span {} némi css, azt jelenti, hogy "amikor a span elem egy gyermek (és nem egy unoka, vagy nagyon nagy gyermeke stb), a szétválás elem".

De használta ezt a CON, hogy az előnyünket. Történelmileg, a gyermek választó már, hogy elrejtse CSS-parancsok IE. Egyszerűen azáltal, hogy html>body elé olyan CSS parancs IE figyelmen kívül hagyja:

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

Ez működik, mert <body> mindig gyermeke <html> - ez persze soha nem lesz unoka vagy dédunoka a <html> .

Most, hogy IE 7 megérti a gyermek választó, akkor be kell helyeznie egy üres megjegyzést címke után közvetlenül a nagyobb jel. IE 7 majd nem értik ezt választó (ki tudja miért!?), És ezért teljes mértékben figyelmen kívül hagyják ezt CSS parancsot:

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

Ha még nem láttam ezeket korábban, van olvassa el a következőket is


2008 Október 4, 2008

Eltűnő HTML / DIV elem az Internet Explorer [IE]

Mint általában, az egyik a sok furcsa probléma IE és ez kell a soraiban TOP 10 IE Quirks.

PROBLÉMA NYILATKOZAT (Ez volt az én problémám, lehet, hogy hasonló misbehaviors):
Nekem van sok DIV van az oldalon osztályú "sectionhead", amely nem más, mint a címe egy szakaszt az oldalon. Szóval van pár stílus ehhez hasonlóan néz ki

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

A div egy világosszürke bár néhány fekete szöveg. Mi történik az IE néhány ilyen szakasz fejlécek jelennek meg ok, de néhány láthatatlan, amíg lapozunk az oldalon, vagy kattintson az oldalon valamit, stb Néha hajlamosak eltűnni, ha rákattint az "Alt" billentyűt, amikor a Page Down vagy lapozzunk a görgetősáv. Néha úgy tűnik, újra megjelenik, ha a Frissítés (F5) az oldal. Én rövid tökéletesen egyszerű DIV néhány egyszerű stílusban viselkedik rossz.
Mit okozhat egy ilyen kiszámíthatatlan viselkedése? Nos! Őszintén szólva, fogalmam sincs!

LEHETSÉGES MEGOLDÁS:
Megint ne kérdezd, miért, de sok esetben ez a probléma általában eltűnnek, ha hozzá helyzet: relatív az MIS viselkedő elemek stílusban, mint ez a

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

Furcsa, de mit mondjak? Isten áldjon meg engem IE!

ÉS osztozik az Egyesült Államokkal, Ha lenne hasonló problémákkal.


2008 Július 15, 2008

IE 8 szigorú mód és CSS homályosság ... Kerülő

Hát igen! A korábbi követő néhány napon belül vissza illetően homály IE8, elfelejtettem megemlíteni egy fontos pont, hogy "IE 8 szigorú mód nem teszi lehetővé a CSS homályosság".
Azok számára, akik donot érteni, mire gondolok a szigorú mód, itt gyors bemutató .

Egy mű körül, hogy ezt (IE fejlesztői csapatának előtt veszik észre, hogy már kövezett út újbóli munkarutin a világ minden tájáról, a web-oldalak segítségével Pop-up albumok némi homály, és tegye vissza támogatása Opacity) az, hogy egy félig átlátszó kép ... lehetőleg PNG formátumban (volt már rossz tapasztalata egyre átlátszó GIF képeket ugyanúgy működik, mint kellett volna). Hozzon létre egy PNG képet a szín és az átláthatóság százalékos tetszik, az a kedvenc képszerkesztő, és használja azt háttérképét Kedvencek overlay.

azaz
Ahelyett, hogy valami ilyesmit

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

Tegye ezt ....

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

Próbálni, KATTINTSON IDE! | letölteni, KATTINTSON IDE!


2008 Július 6, 2008

Nem "Átlátszóság" az IE8

Ha megnyitja ezt az oldalt IE8, akkor be kell látni a teljes átlátszatlan, fehér háttér mögött ezen a poszton. Tegnap, az én kollégám rámutatott erre, hogy nekem (Ahogy én egyike vagyok azoknak, akik alkalmazkodni a változásokhoz lassan és folyamatosan ... főleg böngészőkben. Mondhatnánk, Im gyáva, de hát legyen .... Mivel egy UI fejlesztő vagyok, mindig szar félek az új verzió böngésző ... tudod mit Im tlaking szó, ugye?)

Ástak körül, miközben, megpróbálja megtalálni a megoldást, javítsa ki és akkor mi ...
Ezúttal mi BÁRMIKOR KEDVENC böngésző nem tette meg újra a csepegés mindegyike támogatja a CSS áttetszőségét. A nem szabványos `filter: alpha (fedettség = # #)` CSS tulajdonság el lett távolítva, Nizza, de ők is teljesen elfelejtettem hozzá CSS3 támogatás fedettség (mint például hogyan összes többi böngésző szépen megtartották azt.) Így óta először Isten azt mondta nekünk a CSS átlátszatlansága (hiszen IE 5.0, azt hiszem), a web böngésző nem támogatja a CSS-fedettség.
És most a krém tetejére: Hivatalos szót IE 8 csapat? Ez "by design" és a "fogjuk vizsgálni ezt egy későbbi változatát IE."

PS: Próbáld ki ezt az oldalt FF, esküszöm, úgy néz ki, ügyes!


2008 Június 20, 2008

Fehér tér Bug sorban / Tétellista (li) az IE6

Ha valaha készült (vagy hogy 1) egy függőleges menü segítségével listaelemek (li) címkék és a CSS, akkor szembesülhet, ez egy újabb hiba az Internet Explorerben, ahol IE 6 betétek eltéréseinek lista elemeit tartalmazó blokk szintű elemeket, vagyis ha van szóköz között a lista elemeit a jelölést. Kösz, de kösz, az IE 7-es verzió úgy tűnik, ez a hiba mentes.
Ha, mint én, és még sok más, Ön ebbe a csapat csalódott fejlesztők, akik még, hogy az új elrendezést, az IE6 is dolgozik, akkor ez hasznosnak bizonyulhat. Vessen egy pillantást ...

Minta jelölés:

<ul id="menu">
<li> <a href="#"> Kezdőlap </ a> </ li>
<li> <a href="#"> ról </ a> </ li>
<li> <a href="#"> Szolgáltatások </ a> </ li>
<li> <a href="#"> Portfolió </ a> </ li>
<li> <a href="#"> GYIK </ a> </ li>
<li> <a href="#"> Kapcsolat </ a> </ li>
</ Ul>

Lehet, hogy hozzon létre egy CSS, hasonló, mint alább, hogy a fenti jelölés transfrom egy vertikális menüt ....

Minta CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; szélesség: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Az eredmények azt fogja látni ...
null

Megoldás ezt a hibát ... (módosított / hozzáadott CSS félkövér dőlt)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; szélesség: 150px;
float: left; / * ez lebegett a lista elemeit tartalmazza * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Ez a javítás a * /
szélesség: 100%; / * whitespace bug az IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Ha a fenti megoldás doesnot működne (ismert okok miatt csak IE6) ... próbáld inkább ezt a módszert

Csak add ezt a kiegészítő csak IE6 stílust a jelölések ...

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


2008 Április 12, 2008

CSS Kereszt böngésző Minimális magasság Hack

Hozzászólás IE 6, MSIE volt olyan kedves, hogy minket a fejlesztők UI hozzáadásával még néhány CSS tulajdonságok szabvány legtöbb szabványos böngészőkben. Az egyik ilyen hasznos tulajdonság "min-height". Szép egyenes továbbít tulajdonsága, amely nem igényel hosszú magyarázatot kifulladt. Amikor egy min-height egy részlege van beállítva, hogy mindig fenntartja, hogy a beállított magasság, ha a tartalom is kisebb helyet foglal, mint a házakat képes tárolni és a fontosabb (ellentétben a plain vanilla "height" tulajdon) mérlegek vagy CSS szavakat, akkor úgy viselkedik, mint egy részlege, amelynek "magassága" beállítása "auto" ...

Másoknak közülünk szegény fejlesztők, akik még mindig van szükség, hogy a CSS kódot is dolgozniuk kell az IE6, az ENSZ-elérhetőségét a "min-height" bizonyulhat hazavágja valamikor ... Donot kétségbeesés.

Szerencsére, van elég furcsa szokásai az IE-ben, hogy mi lenne arra használni, hogy előnyös, és csapkod a végig, hogy elérjük azt a célt ... azaz, hogy az osztály részlege, mintha a min-height az IE6

1. megoldás: A aláhúzás Hack [ ... Bővebben ]

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

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


2. megoldás: A CSS attribútum szelektor 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>

A CSS attribútum szelektor Hack kihasználja azt a tényt, a böngészők figyelmen kívül hagyja a korábbi tha IE6-1 attribútum a felhasznált választó. Megjegyzés: a követelmény másik tartályba szétválási class = "someclass". Csak a presense az osztály attribútum ezt a felosztást, felülírja az automatikus magasság vissza az Opera, Mozilla és MSIE7 majd. IE6, ami nem támogatja attribútum a felhasznált választókkal, figyelmen kívül hagyja azt.

Demo megtekintése a min-height csapkod IE6



2008 Március 15, 2008

Izgatja Select dobozok keresztül látható a Popup osztályok

Több alkalommal, eközben oldalelrendezések felugró megosztottságot / albumok / etc Tippek találkozhatunk olyan helyzetekben, amikor valamilyen formában SELECT tárgyak történik, hogy az e POPUP osztályok, tervezési és ez átüt .... Yuk!

Nos! akkor könnyen kijavítani ezt beállítani a z-index értékeket megfelelően az FF és az IE7. De a jó öreg (szójáték szándékozott) IE6 nem úgy viselkedik, mint szánták .... A legördülő lista segítségével mutatják, még azután is alkalmaz valamilyen drasztikusan magas z-index értékeket a popup osztály ... A fenébe!

Jelenleg nem jelentek meg javítások ezt a problémát, de vannak, azt hiszem, több, mint néhány munkába menet-körül ez a probléma, de Im itt, hogy elmondjam a legegyszerűbb megoldás, hogy használjam, ami jól működik nekem, a legtöbb esetben ....

"Elrejtése ROUGE SELECT listában, akkor megjeleníti a POPUP"

Egyszerűen a script kódrészletet mutatni, ahol a popup, adjunk hozzá egy darab szkriptet láthatóságát beállítja a legördülő lista a "Rejtett"

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

És ne feledd, hogy állítsa vissza a Close a PopUp osztály

document.getElementById ('my_select "). style.visibilty =" látható ";

ahol "my_select" az ID-irritáció SELECT Box

Remélem ez segít ...

PS. Vannak persze más lehetőségek, mint dinamikusan positionining IFRAME-ben (akkora, mint te PopUp) a Popup DIV ... Ez jól működik is, de egy hozzáadásával rengeteg DOM elemek, szkriptek és fejfájás. Én használtam ezt a megoldást is, és ha mégis segítségre van szüksége ezzel az opcióval, ne szólj. Szívesen segítünk!


2008 Január 8, 2008

Feltételes Megjegyzés: Az Ön csak IE-rész Duex

Néhány hónappal korábban láttuk, hogyan tudnánk is egy darab CSS lenne látható, hogy csak IE6 ( Az Ön csak IE ). Vannak más módon kívánják elérni ezt is. Egyszerűen egy külön CSS-adatokat, a cél az IE. lehetne ezt elérni az úgynevezett feltételes megjegyzések.

Feltételes megjegyzések egy módja annak, hogy érzékeli a böngésző típusa és verziója. A böngészőellenőrző végzik annak érdekében, hogy a tartalom bemutatták a böngésző specifikus. A böngészőellenőrző lehet elvégezni különböző technikákat. Ez a módszer számos előnye van a korábbi módszerekkel, amely tartalmazta a stílus váltás a javascript. Felsorolni néhány fontos lenne;

  • Scripting nem szükséges
  • Cross-böngésző

Hogyan csináljuk ezt?

Tegyél valamit az IE csak az 5.
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Tegyél valamit az összes IE verzió
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Van valami újabb változata Minden IE, hogy az IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

További feltétele vartiations, olvasd el ezt az MSDN info:
Mintegy Feltételes Comment


2007 Szeptember 8, 2007

Az Ön csak IE

Ha már írás közben a CSS, akkor kellett volna megtapasztalni azokat az időket, amikor szó szerint húzza a hajat, ha a CSS layouts nézett finom minden új böngészők (mármint böngészők legkésőbb IE6), de az IE 6 dob egy hisztit. Ön keményen küzdenek, hogy beállítsa a CSS, de ez nem működik ... Nos! Próbálja ki ezeket Hacks ...

1. Aláhúzás Hack: -
A meghatározás szerint a CSS 2.1 specifikáció lehetővé teszi, aláhúzás ("_"), a CSS azonosítókat. De sokan még mindig úgy tűnik, hogy böngésző figyelmen kívül hagyja azonosítja haladt egy aláhúzás, de pl. Ez IE bug / szolgáltatás így lesz egy nagyon világos módon lehet szabályozni a CSS tulajdonságokat csak IE. úgy emlékszem, a CSS tulajdonság írt az aláhúzás az elején látható az Internet Explorer (az összes verzió, de IE 7)

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

Téma mutatja ezt aláhúzás hack

Továbbá, a min-height csapkod IE6 használja az aláhúzás hack, nézd meg


2. Kettőskereszt (#) Hack: -
Mint az aláhúzás hack, ez túl van az IES Oly, jó különbséggel, ingatlan azonosítók előzi meg a start # látható mindenki számára IE verzió, benne IE7 és láthatatlan minden más szabványos böngésző.

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

Ez a hack éltek szépen igazolni egy kereszt függőleges igazítása böngésző megoldást, nézd meg ezt a cikket találja meg többet


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

Ezek hack tűnik Heaven Sent, amikor semmi más nem működik ... Ha ezek közül bármelyik hack ment egy nap az életedben, ne felejtsd el, hogy bánnak velem egy kávét :)


2007 Július 12, 2007

Mouseover esemény egy átlátható munkamegosztást az IE

Volt, ahol ezt a problémát, ha mouseover esemény volt egy osztás (DIV), és ez a megosztottság, valami jó oka volt, hogy átlátható legyen (például az én esetemben, ahol meg kellett volna megjeleníteni néhány tag több mint egy képet az egér fölötte van a ez átlátható munkamegosztást), azaz nem sikerült elindítani a mouseover esemény (jól működött a Firefox).

Próbáltam több lehetőség ... amelyek közül sok volt, csak egy kétségbeesett kísérlet arra, hogy az esemény a tüzet az IE. Az egyik értelmes is, hogy azt hittem működhet az volt, hogy a háttér színét az osztály, és állítsa be a homály, hogy nulla ... Nos! dint munka!

A végső megoldás, amely úgy tűnt, működik, és nem zavarja a funkcionalitást I szükséges volt, hogy egy ismételt pixel / átlátszó hátterű képet az adott körzetben

... Silly! de most úgy tűnik, IE boldog.


NDK home | Kifejezése IT | kifejezése szájpadlás | kifejezése Penmenship | kifejezése Awe | kifejezése Myself