Udtrykke det

Igen og igen, når alle de andre browsere set at opføre sig som fortalt af W3C regler, dvs spiraler dig ud af udviklingen ånd ved at kaste et raserianfald, betyder det ikke synes at have et fix. Bare sådan en, er dette problem i IE7.

Problem Statement:
Jeg og så kan mange af de andre alvorlige web-udviklere har bemærket mere end mange gange, at når der er indlejret flyder i layout, om svæver over nogle links (anker tags), den indeholder beholderen ser ud til at flytte nogle få pixels til højre . Jeg har forsøgt at google løsninger til dette problem, men har næppe fundet noget fornuftigt svar på hvorfor og hvornår det sker (som kan bidrage til at forhindre dette problem i at ske), derfor har jeg aldrig fundet en klar løsning på problemet enten ...

Mulig løsning:
Ud af erfaring, har jeg varsel 90% procent af de gange, dvs, at dette problem løses ved at tilføje en zoom ejendom i CSS definition af mis-opfører beholder ...

 # Somediv {
       zoom: 1;
 }

igen årsagerne er tvetydige ... prøv dette ...
Nogle elementer i IE har en "hasLayout" ejendom, der er "ægte" som standard. Mange visuelle CSS adfærd, for eksempel en a-filter virker kun på et element, der hasLayout. og {Zoom: 1} synes at give de udvalgte elementer hasLayout ejendom .... Nyttigt? Jeg tror ikke så ...

Zoom Ejendommen er tilsyneladende også understøttes af Chrome, men dens anvendelse fordybning synes at gøre meget negativ effekt på mit layout ... prøv det, hvis det virker for dig ... hvis det ikke gør, bogmærke denne side under "CSS craps"

Google starter en bevægelse tilskynde folk til at dumpe IE6 ... Ved aflytning IE6-brugere med en POPUP på side belastning ... måske ikke en meget god ide ... men er en UI udvikler, jeg er nødt til at slutte dette band vogn ... en mindre browser for mig bekymre sig om ... Beklager egoistisk er det! men jeg har medtage denne javascript ... (TRY DENNE SIDE i IE6) ...
Hey! og på den lysere note ... Se det er en visning af POWER af JavaScript .... Det kan endda nedlægge en kæmpe (eller når det var)

SÅ ... Hjælp befri verden for IE6 med en linje af javascript!

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

Hvis du er css person, ville du vide smerten i at få dine layout arbejder cross-browser. IE8 er endnu en kæp i hjulet for os udviklere. Anywaz! hvis du rammer ved dette problem, ligesom jeg gjorde i går, hvor din perfekt arbejde CSS i IE7 (og tidligere) og Firefox har pludselig begyndte at kaste tantrums i IE8, så prøv denne ... det pænt syntes at løse mine problemer i øjeblikket ....

Ved hjælp af Meta erklæring, kan vi specificere rendering engine vi gerne IE8 til at bruge. Så for at tvinge IE8 at gøre som IE7 ... Indsæt følgende metatag i hovedet af dit dokument: -

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

Som standard IE Meta ville være: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
som vil gøre IE8 gøre siden ved hjælp af nye standarder mode.

Hvis det er nødvendigt, kunne denne syntaks bruges til at rumme for andre browsere som nedenfor:

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

MERE Om DOCTYPES:

Hvis du endnu ikke kender til den slags dyr kaldes "doctype" ... her er nogle hurtig læst
Hvad er DOCTYPES? Hvad er BROWSER Quirks & Streng tilstand?
Indstilling af DOCTYPE i XSL

For en mere dybtgående forståelse DOCTYPES, kan du besøge disse links ...
A List Apart: Fix dit websted med højre DOCTYPE!
A List Apart: Beyond DOCTYPE: webstandarder, Fremad kompatibilitet og IE8

Bemærk: Selvom mange af os, HTML / CSS mennesker er blevet negligerer vigtigheden af ​​DOCTYPE decleration i vores dokumenter, Indstilling af højre DOCTYPE, er normalt svaret på de fleste cross browser spørgsmål.

CSS til ikke-IE browsere: Dens ingen nyheder at CSS udviklere, at CSS Børne Selectors som eksemplet nedenfor, ikke synes at virke i IE.

f.eks div> span {nogle css}, der betyder "når et span element er et barn (og ikke et barnebarn eller stor barnebarn osv.) af en division element".

Men vi brugte denne CON til vores fordel. Historisk set har barnet vælgeren blevet anvendt til at skjule CSS kommandoer fra IE. Simpelthen ved at placere html>body foran en CSS kommando IE vil ignorere det:

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

Det virker, fordi <body> altid er et barn af <html> - det kan naturligvis aldrig være et barnebarn eller oldebarn af <html> .

Nu hvor IE 7 forstår barnet selector, skal du indsætte en tom kommentar tag i umiddelbart efter større end tegnet IE 7 vil ikke forstå denne vælgeren (hvem ved hvorfor!?) Og vil derfor helt ignorere denne CSS kommando.:

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

Hvis der ikke allerede har set dem før, har læst gennem følgende samt

• Betingede Bemærkninger: For din IES Kun-Part Duex
• CSS hack: Javascript, CSS, HTML for kun Firefox
• For din IES Kun

Som sædvanlig. En af de mange nogle mærkelige problemer med IE, og det må man rangerer i top 10 i IE Quirks

PROBLEM ERKLÆRING (Dette var mit problem, måske du har lignende dårlig opførsel):
Jeg har mange DIV er på siden med klassen "sectionhead", der er intet, men titlen på en sektion på siden. Så jeg har nogle stil ser ud som denne

. Sectionhead {font-size: 18px; baggrund: # cfcfcf; padding: 5px;}

Det div er en lys grå bar med noget sort tekst. Hvad der sker i IE er nogle af disse sektionsoverskrifter vises ok, men nogle er usynlige, indtil du rulle siden eller klik noget på siden osv. Engang de har tendens til at forsvinde, når du klikker på 'alt', når du side ned eller rulle med scroll-bar. De tider synes at igen, når du genindlæse (F5) på siden. Jeg kort ganske enkelt DIV med nogle enkle stil opfører BAD.
Hvad kunne skabe en sådan en uberegnelig adfærd? Nå! Helt ærligt, NO IDEA!

MULIG LØSNING:
Igen spørg mig ikke hvorfor, men i mange tilfælde dette problem tendens til at forsvinde, når du tilføjer position: i forhold til mis opfører elementer stil, som dette

. Sectionhead {font-size: 18px; baggrund: # cfcfcf; padding: 5px; position: relative}

Weird, men hvad jeg skal sige? Gud velsigne mig fra IE!

OG deler med USA, hvis du havde lignende problemer.

Nå ja! I tidligere indlæg et par dage tilbage for Opacitet i IE8, jeg glemte at nævne et vigtigt punkt, at "IE 8 streng tilstand ikke giver mulighed for CSS uigennemsigtighed".
For dem, der donot forstår, hvad jeg mener med streng tilstand, her er hurtig tutorial .

Et værk omkring dette (Før IE dev team indse, at de har banet vejen for re-arbejdsrutiner over hele verden, for web-sites bruger pop-up lightboxer med nogle opacitet, og sat tilbage støtte til opacitet) er at bruge en semi gennemsigtigt billede ... helst i PNG-format (jeg har haft dårlig oplevelse at få gennemsigtige GIF-billeder til at arbejde som de skulle). Opret en PNG billede af farven og procentdelen af ​​gennemsigtighed du kan lide, i jer foretrukne billedredigeringsprogram og bruge det som baggrundsbillede til din lightbox overlay.

dvs
I stedet for at noget som dette

. Lighbox_overlay {
background-color: # ffffff;
z-index: 1001;
-Moz-opacity: 0,6;
opacitet: 0,60;
filter: alpha (opacity = 60);
}

Gør dette ....

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

At prøve det, KLIK HER! | AT DOWNLOADE, KLIK HER!

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

Indlæg IE 6, har MSIE været så venlig at os UI udviklere ved at tilføje nogle flere CSS egenskaber standard til de fleste andre standard browsere. En sådan nyttig egenskab i "min-højde". Temmelig ligetil ejendom, som ikke behøver lange forpustet forklaring. Når en min-højde for en afdeling er indstillet, er det altid bevarer det sæt højde, når det indhold, husene optager mindre end den kan rumme og vigtigere (i modsætning til plain vanilla "højden" ejendom) skalaer eller i CSS ord, den opfører sig som en spaltningen, hvis "højde" er sat til "auto" ...

For nogle af os fattige udviklere, der stadig er forpligtet til at kode, CSS, som også skal arbejde i IE6, kan un-tilgængeligheden af "min-height", vise et show prop engang ... donot fortvivlelse.

Heldigvis har vi nok særheder i IE, at vi ville bruge til at ud fordel og hacke vores vej igennem for at nå vores mål ... nemlig at gøre en division division, som om den min-højde i IE6

Løsning 1: Ved hjælp af understregning Hack [ ... Læs mere ]

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

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

---

Løsning 2: Brug af CSS attribut Selector Hack

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


CSS attribut Selector Hack drager fordel af det faktum, de browsere tidligere THA IE6 ignoreret en atribute-vælgeren. Bemærk kravet om en anden beholder division med class = "someclass". Bare presense i klassen attributten for denne opdeling, tilsidesætter højden tilbage til Auto, for Opera, Mozilla og MSIE7 og senere. IE6, som ikke understøtter atribute vælgere, ignorerer det.

Se demo af min højde hack for IE6

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!