Uttrycka det

Om du visar webbplatsen på IE8, måste du få se en full ogenomskinlig vit bakgrund bakom det här inlägget. Igår pekade min kollega detta för mig (Eftersom jag är en av dem att anpassa sig till förändringar långsamt och stadigt ... speciellt webbläsare. Kan säga, Im feg, men så var det .... Som UI utvecklare, är jag alltid shit rädd för nya webbläsare ... du vet vad Im tlaking om, eller hur?)

Grävde runt för tag, att försöka hitta en lösning för att fixa det och sedan vad ...
Denna gång vår TIDERNA FAVORIT webläsare har gjort det igen genom att släppa allt stöd för CSS opacitet. Den icke-standardiserade `filter: alpha (opacity = # #)` CSS attribut har tagits bort, Nice, men också helt glömt att lägga till CSS3 opacitet stöd (som hur alla andra webbläsarens snyggt har hållit den i). Så för första gången sedan Gud berättade om CSS opacitet (sedan IE 5,0, antar jag), kommer en webbläsare stöder inte CSS opacitet.
Och nu för grädde på toppen: Officiell ord från IE 8 lag? Det är "by design" och "vi kommer att överväga detta i en framtida version av IE."

PS: Försök webbplatsen på FF, svär det ser snyggt!

Om du någonsin har gjort (eller gör en) en vertikal meny med listobjekt (Li) taggar och CSS, kan du stöta på detta ännu en bugg i Internet Explorer, där IE 6 inlägg dessa luckor mellan listobjekt som innehåller element blocknivå, dvs om det finns något blanktecken mellan listobjekten i markeringen. Tack, men nej tack, verkar IE version 7 fri från detta fel.
Om som jag, och många fler, du tillhör denna skara frustrerade utvecklare som fortfarande måste få sina nya layouter, som arbetar i IE6, då detta kan vara till nytta. Ta en titt ...

Exempel på kod:

<ul id="menu">
<li> <a href="#"> Hem </ a> </ li>
<li> <a href="#"> Om </ a> </ li>
<li> <a href="#"> Tjänster </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> Vanliga frågor </ a> </ li>
<li> <a href="#"> Kontakta oss </ a> </ li>
</ Ul>

Du kan skapa viss CSS, liknande en nedan, för att transfrom ovanstående markeringar i en vertikal meny ....

Provet CSS ...
# Meny {
margin: 0; padding: 0; Bakgrund: # FF9900;
list-style-type: none; width: 150px;
}
# Menyn li {margin: 0; padding: 0;}
# Menyn en {display: block;
color: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Resultatet ser du ...

Lösning för denna bugg ... (modifierad / till CSS i fet stil)

# Meny {
margin: 0; padding: 0; Bakgrund: # FF9900; list-style-type: none; width: 150px;
float: left; / * Denna innehåller flottades listobjekt * /
}
# Meny li {
margin: 0; padding: 0;
float: left; / * Detta fixar * /
width: 100%, / * whitespace buggen i IE6 * /
}
# Menyn en {
display: block; color: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Om ovanstående lösning doesnot verkar fungera (av skäl som är kända för att IE6 endast) ... prova denna metod i stället

Lägg bara till den kompletterande IE6 endast stilar till din markup ...

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

Vid flera tillfällen medan du gör sidlayouter med popup divisioner / lightboxar / tips etc vi kommer i situationer där någon form Markera objekt råkar vara under dessa POPUP sektionerna, genom design och det märks genom att .... FY!

Tja! du kan enkelt fixa detta genom att justera dina Z-index värden på lämpligt sätt för FF och IE7. Men Good Old (pun intended) IE6 inte beter sig som avsett .... SELECT BOX lyser igenom även när du har några drastiskt höga z-index värden enligt PopUp Division ... Bummer!!

Det finns INGA korrigeringar för detta problem, men det finns, tror jag, mer än ett fåtal sätt att arbeta-runt detta problem, men Im här för att berätta den enklaste lösningen som jag använder, som fungerar bra för mig, i de flesta fall ....

"Dölj ROUGE SELECT BOX när du visar POPUP"

Bara i skriptet textsnutt där du visar din popup, lägg till en bit skript för att ställa in synlighet för SELECT Box till "Hidden"

document.getElementById ('my_select) style.visibilty = "dold".

Och kom ihåg att sätta på den igen slutet av din popup Division

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

där "my_select" är ID för den irritation SELECT Box

Hoppas att detta hjälper ...

PS. Det finns såklart andra alternativ som dynamiskt positionining en IFRAME (samma storlek som du PopUp) under Popup DIV ... Detta fungerar bra också, men med ett tillägg av massor av DOM element, manus och huvudvärk. Jag har använt denna lösning också, och om du behöver någon hjälp med det här alternativet, låt mig veta. Kommer vara glad att hjälpa till!

Några månader tidigare såg vi, hur vi skulle kunna innefatta en del av CSS som skulle vara synlig för IE6 endast ( För er IE endast ). Det finns andra sätt att uppnå detta. Helt enkelt inkludera en separat CSS, som är specifik för ditt mål IE. Detta skulle kunna uppnås med vad som kallas Villkorliga kommentarer.

Villkorliga Kommentarer är ett sätt att upptäcka typ av webbläsare och version. Webbläsaridentifiering utförs för att säkerställa att innehållet presenteras för webbläsaren specifik. Webbläsare detektering kan ske med användning av många olika tekniker. Denna metod har flera fördelar jämfört med tidigare metoder, som inkluderade stil växling med javascript. För att lista viktigt några, skulle vara;

• Skript krävs inte
• Cross-browser

Hur gör vi detta?

Gör något i IE 5 endast
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Gör något i Alla IE-versioner
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Göra något i alla IE-versioner nyare att IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

För mer villkorliga vartiations, läs denna information på MSDN:
Om villkorlig kommentar

Har du märkt ibland, hur enkla saker bara vägrar att arbeta i IE6 ... location.href är just en sådan sak.

Om du har lagt till en onclick funktion för att ditt ankare tag som nedan ...

<a href="javascript:void(0);" onclick="onClickLink('xxx');"> gå till ny plats </ a>

Med någon funktion här ...
Funktionen onclickLink (id) {
var URI = "test2.html id =?" + id;
window.location.href = URI;
}

Till din ironi, skulle du märker att en sådan bit enkelt skript vägrar att arbeta i IE ... Well! Jag kan diskutera orsaker här, men inte att det kommer vara värt ... Men, jag verkar ha en lösning ... (jag slår om du förstår Javascript, kommer du att förstå varför vi lägga till den här tweak för IE6)

Lösningen

<a href="javascript:void(0);" onclick="onClickLink('xxx'); avkastning false; "> gå till ny plats </ a>

Om du några enkla svar, vänligen gör skriv en kommentar. Det kommer verkligen appretiated jag satsa, av många!

Om du har skrivit CSS för när, skulle du har erfarenhet de gånger då du bokstavligen drar ditt hår när dina CSS-layouter såg bra ut i alla nya webbläsare (jag menar webbläsare senast IE6), men IE 6 kastar ett utbrott. Du kämpar hårt för att anpassa din CSS, men det fungerar inte ... Tja! Prova dessa Hacks ...

1. Understreck Hack: -
Per definition kan CSS 2,1 specifikationen understreck ("_") i CSS identifierare. Men många webbläsare tycks fortfarande ignorera alla identifierar fortsatte med ett understreck, men IE. Detta IE: s fel / funktion blir därmed ett mycket tydligt sätt att ställa CSS egenskaper för IE bara. Så kom ihåg, en CSS-egenskapen skriven med understreck på början är synlig för Internet Explorer (samtliga versioner, men IE 7)

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

Visa demonstration av denna understreck hack

Dessutom använder min höjd hack för IE6 understreck hacka, kolla in

2. Fyrkant (#) Hack: -
Liksom understreck hacka, är detta en för är för IE Oly, med en bra skillnad är egendom identifierare föregås # på start synligt för alla IE-versioner, inklusive IE7 och är osynlig för alla andra standard webbläsare.

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

Detta hack har använts fint att demonstrera ett kors webbläsare vertikal linje lösning, ta en titt på den här artikeln för att finna vår mer

3. CSS för IE6 endast -
#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*/
}

Dessa hacka verkar himlen skickas när ingenting annat fungerar ... Om någon av dessa hacka sparar ditt liv en dag, glöm inte att behandla mig en kopp kaffe :)

Jag hade det här problemet där, om du hade en mouseover händelse på en division (DIV) och att fördelningen av någon anledning måste vara transparent (som i mitt fall, där det krävs för att visa vissa taggar över en bild på mouseover av denna öppna Division), inte IE för att trigga mouseover händelsen (fungerade bra i Firefox).

Försökte flera alternativ ... många som bara var ett desperat försök att få evenemanget att avfyra i IE. En av de förnuftiga sådana, som jag trodde skulle fungera var att sätta en bakgrundsfärg på uppdelningen och ställ in opaciteten till noll ... Well! uppkomsten arbete!

Den slutliga lösning som verkade fungera och inte störa funktionaliteten jag som krävdes var att sätta en pixel upprepad / transparent bakgrundsbild i denna delning

... Silly! men nu IE verkar lycklig.

Enkelt ... För att korrigera denna display problemet användning: inline.

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

Om du har en flöt element såsom en div och du placerar marginalen höger eller margin-left på den del, kommer Internet Explorer 6,0 fördubbla marginalen värde mathållning upp html / css layout. För att åtgärda detta helt enkelt lägga display: inline; till din flytande element.