Četl to v nějakém blogu ... myslel, že to bylo příjemné pro katalogizaci to pro budoucí čj .... Také by mohly být důležitým rozhovor otázkou, kterou by se zeptal jednoho dne ....
Napište fragment CSS, které se zobrazí v modré odstavec ve starších prohlížečích, červené v novějších prohlížečích, zelené a černé IE6 v IE7
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
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ě
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.
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] ->
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
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;
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ář
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 */
}
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.
