Vyjádření IT

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ý!

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

Ř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] ->

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!

O několik měsíců dříve jsme viděli, jak jsme je mohli zařadit kus CSS, který by byl viditelný pouze IE6 ( Pro vaši IES Only ). Existují i ​​jiné způsoby, jak toho dosáhnout také. Jednoduše zahrnovat oddělenou CSS, specifické pro vaši cílovou IE. to by mohlo být dosaženo s tím, co se nazývá jako Podmíněné komentáře.

Podmíněné komentáře je způsob, jak detekovat typ prohlížeče a verzi. Prohlížeč Detekce je prováděna s cílem zajistit, že obsah předložila konkrétní prohlížeče. Detekci prohlížeče lze provést pomocí mnoha různých technik. Tato metoda má několik výhod oproti dřívější metody, které jsou součástí stylu přepínání pomocí javascript. Chcete-li vypsat důležité málo, bude;

• Ten je není nutné
• Cross-browser

Jak to uděláme?

Udělejte něco v IE 5 až
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Něco udělat ve všech verzích IE
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Něco udělat ve všech verzích IE novější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]-->

Pro více podmíněných vartiations, přečtěte si informace na webu MSDN:
O podmíněný komentář

Všimli jste si někdy, jak se jednoduché věci prostě odmítá pracovat v IE6 ... location.href je jen taková věc.

Pokud jste přidali funkci onclick ke svému ukotvení značky, jako je níže ...

<a href="javascript:void(0);" onclick="onClickLink('xxx');"> přejděte na nové místo </ a>

S trochou funkcí, jako je tato ...
Funkce onclickLink (id) {
var URI = "test2.html id =?" + id;
window.location.href = URI;
}

K vaší ironii, že si všimnete, že takový kus jednoduchého skriptu odmítne pracovat v IE ... No! Mohu diskutovat o důvody tady, ale nemyslím, že to bude stát za to ... I když, já Zdá se, že řešení ... (Vsadím se, jestli mi rozumíte Javascript, pochopíte, proč jsme přidali Tento trik pro IE6)

Řešení

<a href="javascript:void(0);" onclick="onClickLink('xxx'); návrat false; "> přejděte na nové místo </ a>

Máte-li jakékoli jednoduché odpovědi, prosím, napsat komentář. To bude opravdu appretiated, vsadím se, mnoho!

Pokud jste psali CSS pro dobu, měli byste zažít ty časy, kdy si doslova vytáhnout vlasy, když si rozvržení CSS vypadala dobře ve všech nových prohlížečích (mám na mysli prohlížeče později než IE6), ale IE 6 vyvolá vztek. Můžete bojovat, těžko upravit CSS, ale to nefunguje ... No! Zkuste tyto hacky ...

1. Podtržítkový hack: -
Podle definice, specifikace CSS 2.1 umožňuje podtržítko ("_") v identifikátorech CSS. Ale mnoho prohlížečů se zdá ignorovat jakékoli identifikuje přistoupil podtržení, ale IE. Tento IE chyba / vlastnost se tak stává velmi jasný způsob, jak nastavit vlastnosti CSS pro IES pouze. tak si pamatujte, vlastnost CSS psaný s podtržítkem na začátku je vidět pro Internet Explorer (všechny verze, ale IE 7)

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

Zobrazit ukázka toho podtržítka hack

Také, min-height hack pro IE6 používá podtržítko hack, podívejte se

2. Hash (#) Hack: -
Stejně jako podtržítko hack, tohle je moc je pro IES Oly, s dobrým rozdílem, majetkové identifikátory předchází # na začátku je viditelná pro všechny verze IE, IE7 zahrnuty a je neviditelný pro jakýkoli jiný standardní prohlížeč.

.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 byl použit pěkně demonstrovat vzájemné prohlížeč vertikální zarovnání řešení, se podívejte v tomto článku najdete naše více

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

Tyto hacky se zdá nebe poslal, když nic jiného funguje ... Pokud se kterýkoli z těchto hacků šetří váš život jednoho dne, nezapomeňte se mnou na kafe :)

Měl jsem tento problém v případě, pokud byste měli mouseover událost na dělení (DIV) a že rozdělení z nějakého dobrého důvodu musela být transparentní (jako v mém případě, kde to bylo nutné k zobrazení některých značek přes obrazu na mouseover z Tento transparentní rozdělení), IE se nepodařilo spustit mouseover událost (pracoval pokutu ve Firefoxu).

Snažili několik možností, ... z nichž mnohé byl jen zoufalý pokus dostat událost na oheň v IE. Jeden z těch rozumných, které jsem si myslel, by mohlo fungovat je nastavit barvu pozadí na rozdělení a nastavte krytí na nulu ... No! dint práci!

Konečné řešení, která se zdála pracovat a neruší funkci jsem byl potřebný, aby se jeden pixel opakovat / transparentní obrázek na pozadí v tomto oddělení

Hloupé ...! ale nyní se zdá IE šťastný.

Jednoduché ... Chcete-li tento problém použití display: inline.

div {float:left;margin:40px;display:inline;}

Máte-li plovoucí prvek, jako je div, a umístíte margin-right, nebo margin-left na tomto prvku, bude Internet Explorer 6.0 dvojnásobné rozpětí hodnotu, nekazí se HTML / CSS layout. K vyřešení tohoto problému stačí přidat display: inline; do plovoucího prvku.