2008 10.10.2008

Nie je len pre IE - CSS selektory deti nefungujú v IE

CSS pre Non-IE prehliadačov: Jeho žiadne správy pre vývojárov, že CSS, CSS selektory deti ako na nižšie uvedenom príklade sa nezdá pracovať v IE.

napr div> p {} niektoré css, to znamená, že "keď span prvkom je dieťa (a nie vnuk alebo veľká slávnostná dieťa atď) z divízie prvku".

Ale sme použili tomto kontexte v náš prospech. Historicky, dieťa volič sa používa na skrytie CSS príkazy z IE. Jednoducho tým, že umiestnia html>body pred akoukoľvek CSS položku Internet Explorer bude ignorovať:

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

Toto pracuje, pretože <body> je vždy dieťa <html> - to možno samozrejme nikdy vnuk alebo pravnuk z <html> .

Teraz, že IE 7 chápe dieťa voliča, musíte vložiť prázdnu značku komentáre sa priamo po viac ako znamienko IE 7 potom nechápem tento volič (kto vie prečo!?), A bude teda úplne ignorovať tento príkaz CSS.:

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

Ak ste nedostali už videli tieto skôr, majú prečítajte si nasledujúce rovnako


2008 04.10.2008

Miznúce HTML / DIV prvky v programe Internet Explorer [CZ]

Ako obvykle, jeden z mnohých niektoré podivné problémy s IE a to je potrebné pozícia v TOP 10 IE vtipov.

PROBLÉM VYHLÁSENIE (To bol môj problém, možno budete mať podobné misbehaviors):
Mám veľa DIV je na stránke s triedou "sectionhead", čo nie je nič iné ako názov oddielu na stránke. Tak som sa niektorí štýl vyzerať ako to

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

Div je svetlo šedá lišta s nejakým čiernym textom. Čo sa stane v IE je niektoré z týchto sekcií záhlaví sú zobrazené v poriadku, ale niektoré sú neviditeľné, kým nie, posúvanie stránky alebo kliknite niečo na stránke a pod Niekedy majú tendenciu miznúť, keď kliknite na tlačidlo 'alt' kľúč pri stránku dole alebo prejdite na posuvníka. Niekedy sa zdá sa objaviť, keď znova načítať (F5) stránku. Aj krátka dokonale jednoduché DIV s nejakým jednoduchým štýlom sa chová BAD.
Čo môže spôsobiť také nevyspytateľné správanie? No! Úprimne povedané, NO IDEA!

MOŽNÁ RIEŠENIE:
Opäť nepýtajte sa ma prečo, ale v mnohých prípadoch tento problém zvyčajne zmizne, keď pridáte pozície: vzhľadom k MIS chová prvkov štýlu, ako to

. Sectionhead {font-size: 18px; pozadia: # cfcfcf, padding: 5px; pozície: relatívna}

Divne, ale čo na to povedať? God Bless ma IE!

A DO Zdieľať s USA, ak by ste mali podobné problémy.


2008 15 júla 2008

IE 8 prísny režim a CSS opacity ... Ďalší postup

Oh No! V predchádzajúcej príspevok o niekoľko dní späť, pokiaľ ide krytie v IE8, som zabudol spomenúť dôležitú vec, že "IE 8 prísny režim neumožňuje CSS opacity".
Pre tých, ktorí donot pochopili, čo tým myslím prísnom režime, tu je rýchly návod .

Práce okolo tohto (Pred IE Dev Team si uvedomujú, že pripravilo cestu pre re-pracovnej rutiny na celom svete, webových stránok pomocou pop-up lightbox s nejakým krytím, a dať späť podporu pre nepriehľadnosť) je použitie čiastočne priehľadný obrázok ... najlepšie vo formáte PNG (mal som zlú skúsenosť dostať transparentný GIF obrázky pracovať ako oni mali). Vytvorte PNG o farby a percento priehľadnosti sa vám páči, vo vás obľúbený editor obrázkov a použiť ju ako obrázok na pozadí pre váš lightboxu prekrytie.

tj
Namiesto toho, aby niečo také

. Lighbox_overlay {
background-color: # FFFFFF;
z-index: 1001;
-Moz-opacity: 0.6;
opacity: 0.60;
Filter: alpha (opacity = 60);
}

Urob to ....

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

To skúsiť, KLIKNITE TU! | NA STIAHNUTIE, KLIKNITE TU!


2008 06.07.2008

Nie "Krytie" v IE8

Ak si prezeráte túto stránku v IE8, potom musí byť vidieť celý nepriehľadné biele pozadie za tento príspevok. Včera, môj kolega upozornil na to, aby mi (ako som som jedným z tých ľudí, ktorí sa prispôsobujú zmenám pomaly a postupne ... predovšetkým prehliadača. By sa povedať, som zbabelec, ale tak je to .... Ako autor UI, som stále hovno strach z novej verzie prehliadačov ... viete, čo Im tlaking o tom, že?)

Vykopanej okolo chvíli, snaží sa nájsť riešenie, ako opraviť to a potom to, čo ...
Tentokrát naše CELÚ DOBU FAVORIT prehliadač má to urobil znova, že vypúšťa všetku podporu pre krytie CSS. Neštandardné `filter: alpha (opacity = # #)` CSS vlastnosť bola odstránená, Nice, ale aj úplne zabudol pridať podporu CSS3 krytia (napr. ako sa všetky ostatné prehliadače pekne držali ho). Takže prvýkrát, pretože Boh nám povedal o CSS opacity (od IE 5.0, myslím), bude webový prehliadač nepodporuje CSS opacity.
A teraz k tomu krém na vrchole: Oficiálne slovo od IE 8 tímu? Je to "návrhu" a "budeme považovať to v budúcej verzii IE".

PS: Skúste túto stránku vo FF, prisahám, že vyzerá čistý!


2008 20 júna 2008

Prázdne miesto Chyba v Radový / Zoznam položiek (LI) v IE6

Ak ste niekedy robil alebo ods robiť jedného) vertikálne menu pomocou položky zoznamu (LI) tagy a CSS, môže dôjsť, to ďalšia chyba v Internet Exploreri, kde IE 6 vloží tieto medzery medzi položkami zoznamu, ktoré obsahujú prvky na úrovni bloku a tj ak existuje medzera medzi položkami zoznamu na značky. Vďaka, ale nie vďaka, verzia IE 7, zdá sa z tohto problému.
Pokiaľ sa rovnako ako ja a mnoho ďalších, patríte do tejto skupiny frustrovaných vývojárov, ktorí ešte majú dostať svoje nové rozvrhnutie, pracujúci v IE6 príliš, potom by to mohlo byť užitočné. Pozrite sa ...

Ukážka značky:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> O </ a> </ li>
<li> <a href="#"> služby </ a> </ li>
<li> <a href="#"> portfólio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontaktujte nás </ a> </ li>
</ Ul>

Môžete si vytvoriť nejaké CSS, podobne ako ten dole, aby transfrom vyššie uvedené značky do zvislej ponuke ....

Ukážka CSS ...
# Menu {
margin: 0; padding: 0; pozadia: # FF9900;
list-style-type: none; šírka: 150px;
}
# Menu Ak {margin: 0; padding: 0;}
# Menu {display: block;
color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Výsledky uvidíte ...
null

Riešenie tejto chyby ... (upravené / pridaná CSS tučnou kurzívou)

# Menu {
margin: 0; padding: 0; pozadia: # FF9900; list-style-type: none; šírka: 150px;
float: left; / * toto obsahuje plávajúcich položky zoznamu * /
}
# Menu Ak {
margin: 0; padding: 0;
float: left; / * Tento opravy * /
šírka: 100%; / * medzera chyba v IE6 * /
}
# Menu {
display: block; color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Ak vyššie uvedené riešenie doesnot Zdá sa, že práca (z dôvodov známych iba IE6) ... skúste túto metódu miesto

Stačí pridať tento ďalší IE6 iba štýly do značky ...

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


2008 12.04.2008

CSS Cross prehliadač Minimálna výška Hack

Príspevok IE 6, MSIE bol taký láskavý, že nám UI vývojárov tým, že pridá ešte niekoľko ďalších vlastností CSS štandardné pre väčšinu ostatných štandardných prehliadačov. Jeden taký užitočné majetok "min-height". Docela rovno vpred majetok, ktorý nepotrebuje dlhú zubořezu vysvetlenie. Ak je nastavená min-height pre rozdelenie, vždy si zachováva nastavenú výšku, že keď obsah je tu zaberá menej ako to môže mať a hlavne (na rozdiel od plain vanilla "Height" majetku) váhy, alebo v slovách CSS, chová sa ako divízie ktorých "výška" je nastavený na "AUTO" ...

Pre niektoré z nás chudobných vývojárov, ktorí ešte sú nutné pre CSS kód, ktorý musí tiež pracovať v IE6, by ne-dostupnosť "min-height", ukázať show zátky niekedy ... donot zúfalstva.

Našťastie máme dosť vtipy v IE, ktoré by sme použili na von výhodu a zaseknúť našu cestu k dosiahnutiu nášho cieľa ... teda urobiť Oddelenie Oddelenie, ako by jeho min-height v IE6

Riešenie 1: Použitie Podtržítkový hack [ ... Prečítajte si viac ]

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

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


Riešenie 2: pomocou atribútu CSS hack Selector

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

Atribút CSS Selector Hack využíva skutočnosť, že starší prehliadača IE6 tha ignoroval atribútom voliča. Na vedomie, že iné rozdelenie kontajnera s class = "someclass". Len presense zo atribút class pre túto divíziu, prepíše výšky späť na auto pre Opera, Mozilla a MSIE7 a novšie. IE6, ktorý nepodporuje atribútom selektory, ignoruje ju.

Zobraziť ukážku z min-height hacku pre IE6



2008 15 marec 2008

Dráždivé Vyberte Krabica viditeľná Popup divízií

Na niekoľkých príležitostiach, zatiaľ čo robí rozvrhnutie stránok s vyskakovacie divíziou Lightbox / etc / Tipy dostávame do situácií, keď niektoré formulári vyberte objekty sa stane, že na základe týchto POPUP divízie, a to podľa návrhu presvitá .... Yuk!

No! môžete ľahko opraviť tým, že nastaví svoje Z-INDEX hodnoty primerane pre FF a IE7. Ale dobrý starý (slovná hračka určená) IE6 sa nespráva ako má .... SELECT BOX presvitať, a to aj po inštalácii niektoré výrazne vysoké hodnoty Z-INDEX na váš PopUp divízie ... Bummer!!

Tam sú NO OPRAVY tohto problému, ale tam sú, myslím, viac než pár spôsob obídenia tohto problému, ale im tu, aby som vám čo najjednoduchšie riešenie, ktoré ju používam, ktorý pracuje dobre pre mňa, vo väčšine prípadov ....

"Skryť ROUGE okne Vybrať KEĎ ZOBRAZIŤ POPUP"

Jednoducho v skripte úryvku, kde môžete ukázať svoje okno, pridajte kúsok skriptu nastaviť viditeľnosť SELECT políčko "Skrytý"

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

A nezabudnite nastaviť späť na sklonku svojho PopUp divízie

. Document.getElementById ('my_select ") style.visibilty =" viditeľné ";

kde "my_select" je ID podráždenie okne Vybrať

Dúfam, že to pomôže ...

PS. Samozrejme existujú aj iné možnosti, ako je dynamicky positionining IFRAME (rovnaký rozmer ako ste popup) pod Popup DIV ... To dobre funguje taky, ale s prídavkom zaťaženia DOM elementov, Skripty a bolesť hlavy. Použil som toto riešenie príliš, a keď potrebujeme pomôcť s touto voľbou, dajte mi vedieť. Vám radi pomôžeme!


2008 08.01.2008

Podmienené Poznámka: V prípade Vášho IES Only časti Duex

O niekoľko mesiacov skôr sme videli, ako sme ich mohli zaradiť kus CSS, ktorý by bol viditeľný iba IE6 ( Pre vašu IES Only ). Existujú aj iné spôsoby, ako to dosiahnuť tiež. Jednoducho obsahuje samostatnú CSS, špecifické pre vašu cieľovú IE. to by mohlo byť dosiahnuté s tým, čo sa nazýva ako Podmienené komentáre.

Podmienené komentáre je spôsob, ako detekovať typ prehliadača a verziu. Prehliadač Detekcia sa uskutočňuje s cieľom zabezpečiť, že obsah predložila konkrétne prehliadača. Detekcie prehľadávača možno vykonať pomocou mnohých rôznych techník. Táto metóda má niekoľko výhod oproti predchádzajúcej metódy, ktoré sú súčasťou štýlu prepínanie pomocou javascript. Ak chcete vypísať dôležité málo, bude;

  • Ten je nie je nutné
  • Cross-browser

Ako to urobíme?

Urobte niečo v IE 5 až
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Niečo urobiť vo všetkých verziách IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Niečo urobiť vo všetkých verziách IE novších že IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

Pre viac podmienených vartiations, prečítajte si informácie na webe MSDN:
O podmienený komentár


2007 08.09.2007

Pre Vašu IES Iba

Ak ste písali CSS pre dobu, mali by ste zažiť tie časy, kedy si doslova vytiahnuť vlasy, keď si rozvrhnutie CSS vyzerala dobre vo všetkých nových prehliadačoch (mám na mysli prehliadača neskôr ako IE6), ale IE 6 vyvolá hnev. Môžete bojovať, ťažko upraviť CSS, ale to nefunguje ... No! Skúste tieto hacky ...

1. Podtržítkový hack: -
Podľa definície, špecifikácia CSS 2.1 umožňuje podčiarkovník ("_") v identifikátoroch CSS. Ale mnoho prehliadačov sa zdá ignorovať akékoľvek identifikuje pristúpil podčiarknutie, ale IE. Tento IE chyba / vlastnosť sa tak stáva veľmi jasný spôsob, ako nastaviť vlastnosti CSS pre IES len. tak si pamätajte, vlastnosť CSS písaný s podčiarknikom na začiatku je vidieť pre Internet Explorer (všetky verzie, ale IE 7)

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

Zobraziť ukážka toho podčiarkovníky hack

Tiež, min-height hack pre IE6 používa podčiarkovník hack, pozrite sa


2. Hash (#) Hack: -
Rovnako ako podčiarkovník hack, toto je moc je pre IES Oly, s dobrým rozdielom, majetkové identifikátory predchádza # na začiatku je viditeľná pre všetky verzie IE, IE7 zahrnuté a je neviditeľný pre akýkoľvek iný štandardný prehliadač.

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

Tento hack bol použitý pekne demonštrovať vzájomné prehliadač vertikálne zarovnanie riešenie, sa pozrite v tomto článku nájdete naše viac


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

Tieto hacky sa zdá neba poslal, keď nič iného funguje ... Ak sa ktorýkoľvek z týchto hack šetrí váš život jedného dňa, nezabudnite so mnou na kávu :)


2007 12.07.2007

Zobraziť počet udalostí v priehľadnom divízie v IE

Mal som tento problém v prípade, ak by ste mali mouseover udalosť na delenie (DIV) a že rozdelenie z nejakého dobrého dôvodu musela byť transparentné (ako v mojom prípade, kde to bolo potrebné na zobrazenie niektorých značiek cez obrazu na mouseover z Tento transparentné rozdelenie), IE sa nepodarilo spustiť mouseover udalosť (pracoval pokutu vo Firefoxe).

Snažili niekoľko možností, ... z ktorých mnohé bol len zúfalý pokus dostať udalosť na oheň v IE. Jeden z tých rozumných, ktoré som si myslel, by mohlo fungovať je nastaviť farbu pozadia na rozdelenie a nastavte krytie na nulu ... No! dint prácu!

Konečné riešenie, ktorá sa zdala pracovať a nerušia funkciu som bol potrebný, aby sa jeden pixel opakovať / transparentný obrázok na pozadí v tomto oddelení

Hlúpe ...! ale teraz sa zdá IE šťastný.


NDK domov | Vyjadrenie IT | Vyjadrenie poschodia | Vyjadrenie Penmenship | Vyjadrenie Awe | Vyjadrenie Myself