Udtrykke det

Hvis du ser denne side i IE8, så skal du til at se en fuld uigennemsigtig hvid baggrund bag dette indlæg. I går, min kollega påpegede det til mig (Som jeg er en af ​​de mennesker, der tilpasser sig ændringer langsomt og støt ... især browsere. Kan sige, Im en kujon, men sådan er det .... Som en UI udvikler, er jeg altid lort bange for nye browserversioner ... du ved, hvad Im tlaking om, right?)

Gravet rundt i mens, forsøger at finde en løsning til at ordne det, og hvad så ...
Denne gang vores ALL TIME FAVORIT browser har gjort det hele igen ved at droppe al støtte til CSS opacitet. Den ikke-standard `filter: alpha (opacity = # #)` CSS attribut er blevet fjernet, Nice, men også helt glemte at tilføje CSS3 opacitet understøttelse (ligesom hvordan alle de andre browserens pænt har holdt det i). Så for første gang siden Gud har fortalt os om CSS opacitet (siden IE 5,0, tror jeg), vil en web-browser ikke understøtter CSS opacitet.
Og nu til cremen på toppen: Officielt ord fra IE 8 hold? Det er "af design" og "vi vil overveje dette i en fremtidig version af IE".

PS: Prøv denne side i FF, sværger det ser pænt!

Hvis du nogensinde har gjort (eller lave en) en vertikal menu ved hjælp af listeelementer (Li) tags og CSS, kan du støde på, er dette endnu en fejl i Internet Explorer, hvor IE 6 indsætter disse huller mellem listeelementer, der indeholder blok niveau elementer, dvs hvis der er nogen mellemrum mellem listeelementerne i opmærkningen. Tak, men nej tak, den IE version 7 synes fri fra denne fejl.
Hvis ligesom mig, og mange flere, du tilhører denne gruppe af frustrerede udviklere, der stadig har til at få deres nye layouts, der arbejder i IE6, så det kan vise sig nyttige. Tag et kig ...

Sample markup:

<ul id="menu">
<li> <a href="#"> Forside </ a> </ li>
<li> <a href="#"> Om </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> portefølje </ a> </ li>
<li> <a href="#"> Ofte stillede spørgsmål </ a> </ li>
<li> <a href="#"> Kontakt os </ a> </ li>
</ Ul>

Du kan skabe nogle CSS, svarende til en nedenfor, for at transfrom ovenstående markup ind i en lodret menu ....

Sample CSS ...
# Menu {
margin: 0; padding: 0; baggrund: # FF9900;
list-style-type: none; bredde: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

De resultater, du vil se ...

Løsning for denne fejl ... (ændret / tilføjet CSS med fed kursiv)

# Menu {
margin: 0; padding: 0; baggrund: # FF9900; list-style-type: none; bredde: 150px;
float: venstre; / * denne indeholder svævede listeelementer * /
}
# Menu li {
margin: 0; padding: 0;
float: venstre; / * dette løser * /
Bredde: 100%; / * whitespace fejl i IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Hvis ovenstående løsning doesnot synes at arbejde (på grund kendt for at IE6 kun) ... prøv denne metode i stedet for

Du skal blot tilføje denne ekstra IE6 kun stilarter til din markup ...

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

Ved flere lejligheder, osv., mens laver sidelayout med popup afdelinger / lightboxer / Tips, vi kommer på tværs af situationer, hvor nogle Form Markere objekter sker for at være under disse POPUP divisioner, ved design, og det skinner igennem .... YUK!

Nå! du kan nemt løse dette ved at justere dine Z-indeksværdier passende til FF og IE7. Men den gode gamle (pun intended) IE6 ikke opfører sig efter hensigten .... SELECT BOX showet igennem, selv når du anvender nogle drastisk høj Z-indeksværdier til din popup Division ... Øv!!

Der er INGEN rettelser til dette problem, men der er, tror jeg, mere end et par måde at arbejde-around dette problem, men Im her for at fortælle dig den enkleste løsning, som jeg bruger, som virker fint for mig, i de fleste af de sager ....

"Skjul ROUGE SELECT felt, når du viser POPUP"

Blot i dit script kodestykke hvor du viser din popup, tilføje et stykke script til at indstille synligheden af ​​SELECT Box til "Hidden"

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

Og husk at sætte det tilbage ved lukning af din popup Division

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

hvor "my_select" er ID'et for den irritation SELECT Box

Håber dette hjælper ...

PS. Der er ofcourse andre muligheder som dynamisk positionining en IFRAME (samme størrelse som du PopUp) under popup DIV ... Dette virker også godt, men med en tilføjelse af masser af DOM-elementer, scripts og hovedpine. Jeg har brugt denne løsning også, og hvis du har brug for hjælp med denne indstilling, lad mig det vide. Vil være glad for at hjælpe!

Et par måneder tidligere vi så, hvordan vi kunne omfatte et stykke CSS, der ville være synlig for IE6 kun ( For din IES kun ). Der er andre måder at opnå dette. Du skal blot indeholde en separat CSS, der er specifikke for dit mål IE. dette kan opnås med det, er indkaldt som Betingede kommentarer.

Betingede Kommentarer er en måde at opdage browser type og version. Browser detektering udføres for at sikre, at indholdet præsenteres for browseren specifikke. Browseren detektion kan udføres ved hjælp af mange forskellige teknikker. Denne fremgangsmåde har adskillige fordele i forhold til tidligere metoder, der indeholdt stil switching hjælp af JavaScript. Til oversigt vigtigt få, ville være;

• Scripting kræves ikke
• Cross-browser

Hvordan gør vi det?

Gør noget i IE 5 kun
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Gør noget i alle IE-versioner
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Gør noget i alle IE-versioner nyere, at IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

For flere betingede vartiations, læse denne info på MSDN:
Om Betinget Kommentar

Har du bemærket nogle gange, hvordan simple ting, der bare nægter at arbejde i IE6 ... location.href er bare sådan en ting.

Hvis du har tilføjet en onclick funktion til din anker tag som nedenfor ...

<a href="javascript:void(0);" onclick="onClickLink('xxx');"> gå til nyt sted </ a>

Med en funktion som denne ...
Funktionen onclickLink (id) {
var URI = "test2.html id =?" + id;
window.location.href = URI;
}

Til din ironi ville du opdage, at sådan et stykke simpelt script nægter at arbejde i IE ... Nå! Jeg kan diskutere grunde her, men tror ikke det vil være umagen værd ... Men, jeg synes at have en løsning ... (Jeg vil vædde på, hvis du forstår Javascript, vil du forstå, hvorfor vi tilføje dette tweak til IE6)

Løsningen

<a href="javascript:void(0);" onclick="onClickLink('xxx'); afkast false; "> gå til nyt sted </ a>

Hvis du nogen enkle svar, skal du gøre skrive en kommentar. Det vil virkelig blive appretiated, jeg vil vædde, af mange!

Hvis du har skrevet CSS for tid, ville du have opleve de tidspunkter, hvor du bogstaveligt talt trække dit hår, når dine CSS-layouts så fint i alle de nye browsere (jeg mener browsere senere end IE6), men IE 6 kaster en raserianfald. Du kæmper hårdt for at tilpasse din CSS, men det virker ikke ... Nå! Prøv disse hacks ...

1. Understregning Hack: -
Pr. definition, giver CSS 2,1 specifikation underscore ("_") i CSS identifikatorer. Men mange browsere stadig synes at ignorere alle identificerer fortsatte med et understregningstegn, men IE. Dette IE har fejl / funktion bliver således en meget klar måde at indstille CSS egenskaber for IES kun. så husk, A CSS ejendom skrevet med understregning på starten er synlig for Internet Explorer (alle versioner, men IE 7)

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

Se demonstration af denne understregning hack

Også den min højde hack for IE6 bruger underscore hack, tjek

2. Hash (#) Hack: -
Ligesom understregningstegn hack, denne ene er er også for IES oly, med en god forskel, ejendom identifikatorer forud med # på starten er synlig for alle IE-versioner, IE7 inkluderet og er usynlig for enhver anden standard browser.

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

Dette hack er blevet brugt pænt at vise en cross browser lodret tilpasse løsningen, have et kig på denne artikel for at finde vores mere

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

Disse hacks synes sendt fra himlen, når intet andet virker ... Hvis nogen af ​​disse hacks redder dit liv en dag, dont glemmer at behandle mig på en kop kaffe :)

Jeg havde dette problem, hvor, hvis du havde en mouseover begivenhed på en division (DIV), og at opdeling af en eller anden god grund skulle være transparent (som i mit tilfælde, hvor det blev forpligtet til at vise nogle tags over et billede på mouseover af denne gennemsigtig fordeling), IE ikke udløse mouseover begivenheden (virkede fint i FireFox).

Forsøgte flere muligheder ... hvoraf mange var bare et desperat forsøg på at få begivenheden til at fyre i IE. En af de fornuftige dem, som jeg troede kunne arbejde var at sætte en baggrundsfarve til opdeling og sæt opacity til nul ... Nå! fordybning arbejde!

Den endelige løsning, som syntes at arbejde og ikke forstyrre den funktionalitet jeg påkrævet var at sætte en én pixel gentaget / transparent baggrundsbillede i denne afdeling

... Silly! men nu IE virker glad.

Simple ... For at løse dette problem brug display: inline.

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

Hvis du har et flydende element, såsom en div, og du placerer margin højre eller margin venstre på denne del, vil Internet Explorer 6,0 dobbelte margin værdi, rodede op i HTML / CSS layout. For at løse dette skal du blot tilføje display: inline; til din flydende element.