2009 07.11.2009

CSS ZOOM - ještě jeden IE vtípek, posun pixelů 3

Čas a znovu, když všechny ostatní prohlížeče vidět, jak se chovat řekl podle pravidel W3C, tedy spirály vás z vývoje ducha tím, že hodí vztek, že se nezdá, že má opravu. Jen takový člověk je tento problém v IE7.

Problém prohlášení:
Já, a tak mohla mnoho z jiných vážných webových vývojářů si všimli více než mnohé časy, že když tam vložený plováky v rozvržení, na vznášet se nad některými odkazy (kotvicí tagy), obsahující kontejner zdá posunout o pár pixelů vpravo . Snažil jsem se google řešení tohoto problému, ale těžko najít jakoukoliv rozumnou odpověď, proč a kdy k ní dojde (to by mohlo pomoci zabránit tomuto problému děje), a proto jsem nikdy nenašel jednoznačné řešení problému buď ...

Možné řešení:
Ze zkušenosti, mám upozornění 90% procent z časů, tj., že tento problém je vyřešen tím, že přidá zoom majetek v definici CSS na mis-chová kontejneru ...

 # {Somediv
       zoom: 1;
 }

opět důvody jsou nejasné ... zkuste to ...
Některé prvky v IE mají "hasLayout" vlastnost, která je "pravda" ve výchozím nastavení. Mnoho vizuální CSS chování, například alfa filtr pracuje pouze na prvek, který hasLayout. a {zoom: 1} Zdá se, že dát zaměřující se na prvky na hasLayout vlastnost .... Užitečné? I dont, že ano ...

Zoom vlastnost je také vypadá, že podporuje Chrome, ale jeho použití dint Zdá se, že velký negativní vliv na mé dispozice ... zkuste to, když to funguje u vás ... pokud se tak nestane, záložku této stránky v kostky "CSS"


2009 22 březen 2009

SevenUp! Podporovat svět, jak se zbavit IE6!

Google spustí pohyb vyzve lidi, aby výpis IE6 ... Do uživatelů IE6 odposlouchávací s POPUP na načtení stránky ... nemusí být dobrý nápad ... ale jako vývojář UI, musím se připojit k tomuto kapelu vozu ... jeden méně prohlížeč pro mě bát Omlouváme se ... sobecká to je! ale já jsem zahrnout tuto javascript ... (TRY této stránky V IE6) ...
Hej! a na jasnější poznámce ... vidět, že je displej POWER JavaScriptu .... může dokonce snížit obra (nebo jednou to bylo)

SO ... Nápověda zbavit svět IE6 s jednou řadou javascript!

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


2008 17 prosinec 2008

Mis-choval IE8: CSS Layout rozbíjet odst. Cílení na verzi prohlížeče pomocí meta tagy v IE8)

Jste-li osoba, CSS, měli byste vědět, jak se vaše bolest v rozvržení pracovní cross-browser. IE8 je další klíč v pracích pro nás vývojáři. Anywaz! Pokud narazíte na tento problém, jako jsem to udělal včera, kde si dokonale fungující CSS v IE7 (a dříve) a Firefox se náhle začali házet záchvaty vzteku v IE8, zkuste toto ... Je hezky vypadalo opravit své problémy na chvíli ....

Pomocí Meta prohlášení, můžeme specifikovat vykreslovací jádro IE8 bychom chtěli použít. Takže nutit k tomu, jak je IE8 IE7 ... vložte následující značku metadat do hlavy dokumentu: -

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

Ve výchozím nastavení IE Meta bude: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
který by IE8 zobrazení stránky pomocí nové normy režimu.

V případě potřeby lze tuto syntaxi použít k ubytovat u jiných prohlížečů jak je uvedeno níže:

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


VÍCE O DOCTYPES:

POKUD jsi ještě neznají druh zvířete zvané "doctype" ... tady je nějaká rychlá číst
Co jsou DOCTYPES? Co to ​​jsou internetové Quirks a Přísný režim?
Nastavení DOCTYPE v XSL

Pro podrobnější pochopení, DOCTYPES, zkuste navštívit tyto odkazy ...
Seznam APT: Fix vaše stránky Se správným DOCTYPE!
Seznam APT: Beyond DOCTYPE: Webové standardy a dopřednou kompatibilitu, a IE8

Poznámka: I když mnozí z nás HTML / CSS lidé byli zanedbávání význam DOCTYPE decleration v našich dokumentech, nastavení správného DOCTYPE, je obvykle odpovědí na většinu otázek příčných prohlížeči.


2008 10.10.2008

Není jen pro IE - CSS selektory děti nefungují v IE

CSS pro Non-IE prohlížečů: Jeho žádné zprávy pro vývojáře, že CSS, CSS selektory děti jako na níže uvedeném příkladu se nezdá pracovat v IE.

např. div> p {} některé css, to znamená, že "když span prvkem je dítě (a ne vnuk nebo velká slavnostní dítě atd.) z divize prvku".

Ale jsme použili tomto kontextu v náš prospěch. Historicky, dítě volič se používá ke skrytí CSS příkazy z IE. Jednoduše tím, že umístí html>body před jakoukoli CSS příkaz Internet Explorer bude ignorovat:

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

Toto pracuje, protože <body> je vždy dítě <html> - to lze samozřejmě nikdy vnuk nebo pravnuk z <html> .

Nyní, že IE 7 chápe dítě voliče, musíte vložit prázdnou značku komentáře se přímo po více než znaménko IE 7 pak nechápu tento volič (kdo ví proč!?), A bude tedy zcela ignorovat tento příkaz CSS.:

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

Pokud jste nedostali už viděli tyto dříve, mají přečtěte si následující stejně


2008 04.10.2008

Mizející HTML / DIV prvky v aplikaci Internet Explorer [CZ]

Jako obvykle, jeden z mnoha některé podivné problémy s IE a to je třeba pozice v TOP 10 IE vtípků.

PROBLÉM PROHLÁŠENÍ (To byl můj problém, možná budete mít podobné misbehaviors):
Mám mnoho DIV je na stránce s třídou "sectionhead", což není nic jiného než název oddílu na stránce. Tak jsem se někteří styl vypadat jako to

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

Div je světle šedá lišta s nějakým černým textem. Co se stane v IE je některé z těchto sekcí záhlaví jsou zobrazeny v pořádku, ale některé jsou neviditelné, dokud ne, posouvání stránky nebo klikněte něco na stránce apod. Někdy mají tendenci mizet, když klikněte na tlačítko 'alt' klíč při stránku dolů nebo přejděte na posuvníku. Někdy se zdá se objevit, když znovu načíst (F5) stránku. I krátká dokonale jednoduché DIV s nějakým jednoduchým stylem se chová BAD.
Co může způsobit takové nevyzpytatelné chování? No! Upřímně řečeno, NO IDEA!

MOŽNÁ ŘEŠENÍ:
Opět neptejte se mě proč, ale v mnoha případech tento problém obvykle zmizí, když přidáte pozice: vzhledem k MIS chová prvků stylu, jako to

. Sectionhead {font-size: 18px; pozadí: # cfcfcf, padding: 5px; pozice: relativní}

Divně, ale co na to říct? God Bless mě IE!

A DO Sdílet s USA, pokud byste měli podobné problémy.


2008 15 července 2008

IE 8 přísný režim a CSS opacity ... Další postup

Oh No! V dřívější příspěvek o několik dní zpět, pokud jde krytí v IE8, jsem zapomněl zmínit důležitou věc, že "IE 8 přísný režim neumožňuje CSS opacity".
Pro ty, kteří donot pochopili, co tím myslím přísném režimu, zde je rychlý návod .

Práce kolem tohoto (Před IE Dev Team si uvědomují, že připravilo cestu pro re-pracovní rutiny na celém světě, webových stránek pomocí pop-up lightboxy s nějakým krytím, a dát zpět podporu pro neprůhlednost) je použití částečně průhledný obrázek ... nejlépe ve formátu PNG (měl jsem špatnou zkušenost dostat transparentní GIF obrázky pracovat jako oni měli). Vytvořte PNG o barvy a procento průhlednosti se vám líbí, ve vás oblíbený editor obrázků a použít ji jako obrázek na pozadí pro váš lightboxu překrytí.

tj.
Místo toho, aby něco takového

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

Udělej to ....

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

To zkusit, KLIKNĚTE ZDE! | KE STAŽENÍ, KLIKNĚTE ZDE!


2008 06.07.2008

Ne "Krytí" v IE8

Pokud si prohlížíte tuto stránku v IE8, pak musí být vidět celý neprůhledné bílé pozadí za tento příspěvek. Včera, můj kolega upozornil na to, aby mi (jak jsem jsem jedním z těch lidí, kteří se přizpůsobují změnám pomalu a postupně ... především prohlížeče. By se říct, jsem zbabělec, ale tak je to .... Jako vývojář UI, jsem pořád hovno strach z nové verze prohlížečů ... víte, co Im tlaking o tom, že?)

Vykopané kolem chvíli, snaží se najít řešení, jak opravit to a pak to, co ...
Tentokrát naše CELOU DOBU FAVORIT prohlížeč má to udělal znovu, že vypouští veškerou podporu pro krytí CSS. Nestandardní `filtr: alpha (opacity = # #)` CSS vlastnost byla odstraněna, Nice, ale také úplně zapomněl přidat podporu CSS3 krytí (např. jak se všechny ostatní prohlížeče pěkně drželi ho). Takže poprvé, protože Bůh nám řekl o CSS opacity (od IE 5.0, myslím), bude webový prohlížeč nepodporuje CSS opacity.
A teď k tomu krém na vrcholu: Oficiální slovo od IE 8 týmu? Je to "návrhu" a "budeme považovat to v příští verzi IE".

PS: Zkuste tuto stránku ve FF, přísahám, že vypadá čistý!


2008 20 června 2008

Prázdné místo Chyba v Řadový / Seznam položek (LI) v IE6

Pokud jste někdy dělal nebo odst. dělat jednoho) vertikální menu pomocí položky seznamu (LI) tagy a CSS, může dojít, to další chyba v Internet Exploreru, kde IE 6 vloží tyto mezery mezi položkami seznamu, které obsahují prvky na úrovni bloku a tj. pokud existuje mezera mezi položkami seznamu na značky. Díky, ale ne díky, verze IE 7, zdá se z tohoto problému.
Pokud se stejně jako já a mnoho dalších, patříte do této skupiny frustrovaných vývojářů, kteří ještě mají dostat své nové rozvržení, pracující v IE6 příliš, pak by to mohlo být užitečné. Podívejte se ...

Ukázka 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="#"> portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontaktujte nás </ a> </ li>
</ Ul>

Můžete si vytvořit nějaké CSS, podobně jako ten dole, aby transfrom výše uvedené značky do svislé nabídce ....

Ukázka CSS ...
# Menu {
margin: 0; padding: 0; pozadí: # FF9900;
list-style-type: none; šířka: 150px;
}
# Menu li {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

Řešení této chyby ... (upravené / přidána CSS tučnou kurzívou)

# Menu {
margin: 0; padding: 0; pozadí: # FF9900; list-style-type: none; šířka: 150px;
float: left; / * toto obsahuje plovoucích položky seznamu * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Tento opravy * /
šířka: 100%; / * mezera chyba v IE6 * /
}
# Menu {
display: block; color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Pokud výše uvedené řešení doesnot Zdá se, že práce (z důvodů známých pouze IE6) ... zkuste tuto metodu místo

Stačí přidat tento další IE6 pouze styly do značky ...

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


2008 12.04.2008

CSS Cross prohlížeč Minimální výška Hack

Příspěvek IE 6, MSIE byl tak laskav, že nám UI vývojářů tím, že přidá ještě několik dalších vlastností CSS standardní pro většinu ostatních standardních prohlížečů. Jeden takový užitečné majetek "min-height". Docela rovně vpřed majetek, který nepotřebuje dlouhou zubořezu vysvětlení. Pokud je nastavena min-height pro rozdělení, vždy si zachovává nastavenou výšku, že když obsah je zde zabírá méně než to může mít a hlavně (na rozdíl od plain vanilla "Height" majetku) váhy, nebo ve slovech CSS, chová se jako Divize jejichž "výška" je nastaven na "AUTO" ...

Pro některé z nás chudých vývojářů, kteří ještě jsou nutné pro CSS kód, který musí také pracovat v IE6, by ne-dostupnost "min-height", ukázat show zátky někdy ... donot zoufalství.

Naštěstí máme dost vtípky v IE, které bychom použili na ven výhodu a zaseknout naši cestu k dosažení našeho cíle ... tedy udělat Oddělení Oddělení, jako by jeho min-height v IE6

Řešení 1: Použití Podtržítkový hack [ ... Přečtěte si více ]

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

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


Řešení 2: pomocí atributu 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>

Atribut CSS Selector Hack využívá skutečnosti, že starší prohlížeče IE6 tha ignoroval atributem voliče. Na vědomí, že jiné rozdělení kontejneru s class = "someclass". Jen presense ze atribut class pro tuto divizi, přepíše výšky zpět na auto pro Opera, Mozilla a MSIE7 a novější. IE6, který nepodporuje atributem selektory, ignoruje ji.

Zobrazit ukázku z min-height hacku pro IE6



2008 15 březen 2008

Dráždivé Vyberte Krabice viditelná Popup divizí

Na několika příležitostech, zatímco dělá rozvržení stránek s vyskakovací divizí Lightboxy / etc / Tipy dostáváme do situací, kdy některé formuláři vyberte objekty se stane, že na základě těchto POPUP divize, a to podle návrhu prosvítá .... YuK!

No! můžete snadno opravit tím, že nastaví své Z-INDEX hodnoty přiměřeně pro FF a IE7. Ale dobrý starý (slovní hříčka určena) IE6 se nechová jak má .... SELECT BOX prosvítat, a to i po instalaci některé výrazně vysoké hodnoty Z-INDEX na váš PopUp divize ... Bummer!!

Tam jsou NO OPRAVY tohoto problému, ale tam jsou, myslím, víc než pár způsob obejití tohoto problému, ale im tady, abych vám co nejjednodušší řešení, které ji používám, který pracuje dobře pro mě, ve většině případů ....

"Skrýt ROUGE okně Vybrat KDYŽ ZOBRAZIT POPUP"

Jednoduše ve skriptu úryvku, kde můžete ukázat své okno, přidejte kousek skriptu nastavit viditelnost SELECT políčko "Skrytý"

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

A nezapomeňte nastavit zpět na sklonku svého PopUp divize

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

kde "my_select" je ID podráždění okně Vybrat

Doufám, že to pomůže ...

PS. Samozřejmě existují i ​​jiné možnosti, jako je dynamicky positionining IFRAME (stejný rozměr jako jste popup) pod Popup DIV ... To dobře funguje taky, ale s přídavkem zatížení DOM elementů, Skripty a bolest hlavy. Použil jsem toto řešení příliš, a když potřebujeme pomoci s touto volbou, dejte mi vědět. Vám rádi pomůžeme!


NDK domů | Vyjádření IT | Vyjádření patra | Vyjádření Penmenship | Vyjádření Awe | Vyjádření Myself