Ausdruck ihrer IT-

Zeit und immer wieder, Wenn alle anderen Browsern gesehen zu verhalten, wie vom W3C Regeln, dh Spiralen Sie aus der Entwicklung von Geist einen Wutanfall gesagt, bedeutet das nicht scheinen, um ein Update zu haben. Genau ein solcher ist dieses Problem in IE7.

Problemstellung:
Ich und so könnten viele der anderen ernsthaften Web-Entwickler haben mehr als Viele Male, dass, wenn es verschachtelt schwimmt im Layout, auf schweben über einige Links (Anker-Tags) bemerkt, scheint das enthaltende Behälter, um ein paar Pixel nach rechts verschieben . Ich habe mit google Lösungen für dieses Problem versucht, aber haben kaum eine vernünftige Antwort gefunden, warum und wann es auftritt (das könnte helfen, dieses Problem zu verhindern), daher habe ich noch nie eine klare Lösung für das Problem gefunden: entweder ...

Mögliche Lösung:
Aus Erfahrung, ich habe Vorankündigung 90% Prozent der Zeiten heißt, dass dieses Problem durch das Hinzufügen einer Zoom-Eigenschaft in der CSS-Definition der mis-verhalten Behälter befestigt ist ...

 # {Somediv
       zoom: 1;
 }

wieder die Gründe sind unklar ... try this ...
Einige Elemente im IE eine "hasLayout"-Eigenschaft, die "wahre" standardmäßig aktiviert ist. Viele visuelle CSS-Verhalten, zum Beispiel, ein Alpha-Filter funktioniert nur auf ein Element, dass hasLayout. und die {Zoom: 1} zu geben scheint die Zielelemente die hasLayout Eigentum .... Sinnvoll? Ich denke nicht so ...

Die Zoom-Eigenschaft wird auch scheint von Chrome unterstützt, aber seine Verwendung kraft scheinen viel negativen Einfluss auf mein Layout machen ... versuchen Sie es, wenn es für Sie funktioniert ... wenn nicht, Bookmark auf diese Seite unter "CSS scheißt"

Google startet eine Bewegung Menschen veranlasst, dumpen IE6 ... Mit dem IE6 nervt Anwender mit einem Popup beim Laden der Seite ... kann nicht eine sehr gute Idee ... aber als UI-Entwickler, muss ich diese Band Zug aufzuspringen ... ein kleiner Browser für mich keine Sorgen über Es tut uns leid ... es ist egoistisch! aber ich habe auch diesen javascript ... (TRY THIS PAGE IN IE6) ...
Hey! und auf der helleren Note ... Siehe es ist eine Darstellung der Macht von JavaScript .... es kann sogar bringen einen Riesen (oder es war einmal)

SO ... Hilfe aus der Welt schaffen IE6 mit einer Zeile Javascript!

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

Wenn Sie CSS Person sind, würden Sie kennen den Schmerz bei der Ihre Layouts arbeiten Cross-Browser. IE8 ist noch ein weiterer Strich durch die Rechnung für uns Entwickler. Anywaz! Wenn Sie auf diese Frage getroffen, wie ich gestern, wo Ihr perfekt funktioniert in IE7 CSS (und früher) und Firefox plötzlich begonnen hat, werfen Wutanfälle in IE8 haben, versuchen Sie dies ... Es schien zu schön meine Probleme für den Moment fixieren ....

Mit META-Deklaration, können wir den Rendering-Engine möchten wir IE8 verwenden möchten. So zwingen IE8 als IE7 machen ... Legen Sie die folgenden Meta-Tag in den Kopf des Dokuments: -

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

Standardmäßig IE Meta wäre: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
was machen würde IE8 machen die Seite mit der neuen Standards-Modus.

Falls erforderlich, könnten diese Syntax verwendet werden, um für andere Browser wie unten unterbringen werden:

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

MEHR Über DOCTYPEs:

Wenn Sie noch nicht vertraut mit der Art von Lebewesen, genannt "Doctype" sind ... hier ist etwas schnell gelesen
Was sind DOCTYPEs? Was sind Browser Tücken u. strenger Modus?
Einstellen der DOCTYPE in XSL

Für ein tieferes Verständnis über DOCTYPEs, besuchen Sie diese Links ...
A List Apart: Befestigen Sie Ihre Website mit den richtigen DOCTYPE!
A List Apart: Beyond DOCTYPE: Web Standards, Forward Compatibility, und IE8

Hinweis: Obwohl viele von uns HTML / CSS Menschen wurden vernachlässigt die Bedeutung der DOCTYPE Decleration in unseren Unterlagen, Festlegen des richtigen DOCTYPE, ist in der Regel die Antwort auf die meisten Cross-Browser-Probleme.

CSS für Nicht-IE-Browsern: Sein keine Neuigkeiten zu CSS-Entwickler,-, CSS-Selektoren Kind wie im folgenden Beispiel, scheint nicht im IE funktionieren.

zB div> span {} einige CSS, das bedeutet ", wenn ein span-Element ein Kind (und nicht ein Enkel oder Urenkel Kind etc.) einer Division Element ist".

Aber wir nutzten diese CON zu unserem Vorteil. Historisch gesehen hat die Kind-Selektor verwendet worden, um CSS-Befehle von IE zu verstecken. Einfach, indem html>body vor jedem Befehl CSS IE ignoriert es:

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

Das funktioniert, weil <body> ist immer ein Kind von <html> - es kann natürlich nie ein Enkel oder Urenkel sein <html> .

Nun, da der IE 7 das Kind Wähler versteht, müssen Sie einen leeren Kommentar-Tag in direkte Einfügen nach dem Größer-Zeichen IE 7 wird dann nicht verstehen, diese Wähler (wer weiß warum!?) Und wird deshalb völlig ignorieren Sie diese CSS-Befehl.:

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

Wenn nicht bereits gesehen haben, bevor diese, haben eine Lese durch die folgenden ebenso

• Conditional Comments: Für Ihre IEs Nur-Teil Duex
• CSS-Hack: Javascript, CSS, HTML nur für Firefox
• Für Ihre IEs Nur

Wie üblich, eine der vielen einige seltsame Probleme mit IE und dies muss man in Reihen TOP 10 der IE Macken.

Problembereich (Das war mein Problem, vielleicht haben Sie ähnliches Fehlverhalten):
Ich habe viele DIV ist in der Seite mit Klasse "sectionhead", was nichts anderes als Titel einer Sektion auf der Seite ist. So habe ich einige Stil so aussieht

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

Das div ist ein leichter grauer Balken mit etwas schwarzem Text. Was passiert im IE ist einige dieser Abschnittsüberschriften ok angezeigt, aber manche sind unsichtbar, bis Sie die Seite klicken oder scrollen Sie etwas auf der Seite usw. Irgendwann neigen sie dazu, zu verschwinden, wenn Sie die "Alt"-Taste klicken, wenn Sie Seite nach unten oder mit der Scroll-Leiste scrollen. Sie scheinen manchmal wieder, wenn Sie (F5) die Seite neu laden. Ich kurz eine ganz einfache DIV mit einigen einfachen Stil verhält BAD.
Was könnte die Ursache eine so unberechenbares Verhalten? Na ja! Ehrlich gesagt, keine Ahnung!

MÖGLICHE LÖSUNG:
Wieder fragt mich nicht warum, aber in vielen Fällen das Problem eher verschwinden, wenn Sie Position hinzufügen: bezogen auf die MIS verhalten Elemente Stil, wie diese

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

Seltsam, aber was ich sagen soll? Gott segne mich von IE!

AKTIE UND TUN SIE MIT UNS, wenn Sie ähnliche Probleme hatte.

Oh Well! In der früheren Post ein paar Tage zurück in Bezug auf Deckkraft in IE8, ich vergaß einen wichtigen Punkt, dass "IE 8 strikten Modus nicht für CSS Opazität erlauben" zu erwähnen.
Für diejenigen, die verstehen, was ich von der Strict-Modus bedeutet nicht mehr parat, hier ist schnelles Tutorial .

Eine Arbeit um zu diesem (Vor IE Entwickler-Team erkennen, dass sie gepflasterten Weg haben zur Wiederwahl Arbeitsabläufe in der ganzen Welt, für die Web-Seiten mit Pop-up-Leuchtkästen mit einer gewissen Undurchsichtigkeit, und wieder Unterstützung für die Opazität) ist der Einsatz eines halb transparentes Bild ... vorzugsweise im PNG-Format (ich habe schon schlechte Erfahrungen immer transparente GIF-Bilder zu arbeiten, wie sie sollten). Erstellen Sie ein PNG-Bild von der Farbe und der Prozentsatz der Transparenz Sie so wollen, in Ihre Lieblingsbeschäftigung Bild-Editor und verwenden Sie es als Hintergrundbild für Ihren Leuchtkasten Overlay.

dh
Anstatt so etwas wie dieses

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

Tun Sie dies ....

. Lighbox_overlay {
background: url (bkg.png) wiederholen;
}

, Es zu versuchen, KLICKEN SIE HIER! | ZUM HERUNTERLADEN HIER KLICKEN!

Wenn Sie diese Seite sehen, in IE8, dann müssen Sie werden sehen, eine vollständige undurchsichtigen weißen Hintergrund hinter diesem Beitrag. Gestern, mein Kollege diese darauf hingewiesen, mir (wie ich einer jener Menschen, die Veränderungen langsam und stetig anzupassen bin ... vor allem Browsern. Könnte sagen, ich bin ein Feigling, aber so sei es .... Als UI-Entwickler, ich bin immer Scheiße von neuen Browserversionen Angst ... du weißt, was Im tlaking etwa, oder?)

Gruben sich nach Weile versucht, eine Lösung zu finden, es zu beheben und was dann ...
Dieses Mal unsere Lieblingslieder Aller Zeiten Browser hat es noch einmal geschehen durch das Fallenlassen von allen CSS-Unterstützung gedacht Opazität. Die Nicht-Standard `filter: alpha (opacity = # #)` CSS-Attribut wurde entfernt, Nizza, aber auch total vergessen zu CSS3-Unterstützung Opazität (wie zB wie all die anderen Browsers schön es in gehalten haben) hinzuzufügen. Also, zum ersten Mal seit Gott sagte uns über CSS Opazität (seit IE 5.0, schätze ich), wird ein Web-Browser unterstützt kein CSS Opazität.
Und nun die Sahne obendrauf: Offizielle Wort von IE 8 Team? Es ist "by design" und "wir werden dies in einer zukünftigen Version von IE betrachten".

PS: Versuchen Sie diese Seite in FF, ich schwöre, es sieht ordentlich aus!

Wenn Sie schon einmal (oder machen ein) ein vertikales Menü haben mit Listenelemente (li)-Tags und CSS, könnte unter Umständen, dies ein weiterer Fehler im Internet Explorer, IE 6 Einsätze, wo diese Lücken zwischen Listenelemente, die Block-Level-Elemente enthalten, dh ob es einen Leerraum zwischen den Listenelementen im Markup. Danke, aber nein danke, scheint die IE-Version 7 frei von diesem Fehler.
Wenn Sie wie ich, und viele mehr, Sie zu diesem Band frustrierter Entwickler, die noch auf ihre neue Layouts, Arbeiten im IE6 zu bekommen, gehören, dann könnte dies als nützlich erweisen. Werfen Sie einen Blick ...

Probe-Markup:

<ul id="menu">
<li> <a href="#"> Startseite </ a> </ li>
<li> <a href="#"> Über </ a> </ li>
<li> <a href="#"> Dienstleistungen </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontakt </ a> </ li>
</ Ul>

Vielleicht schaffen einige CSS, ähnlich wie ein unten, um die oben Markup in ein vertikales Menü transfrom ....

Beispiel CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menü li {margin: 0; padding: 0;}
# Menü a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Die Ergebnisse sehen Sie ...

Lösung für diesen Bug ... (modifiziert / CSS fett und kursiv hinzugefügt)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * Diese enthält schwebte Listenelemente * /
}
# Menü li {
margin: 0; padding: 0;
float: left; / * Dies behebt den * /
width: 100%; / * Leerzeichen Fehler im IE6 * /
}
# Menü a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Wenn die obige Lösung doesnot zur Arbeit erscheinen (bekannten Gründen nur IE6) ... Versuchen Sie diese Methode anstelle

Fügen Sie einfach dieses zusätzliche IE6 nur Vorlagen, um Ihre Markup ...

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

Beitrag IE 6 hat MSIE war so freundlich, uns UI-Entwickler, indem noch ein paar Standard-CSS-Eigenschaften zu den meisten anderen Standard-Browser. Eine solche nützliche Eigenschaft in "min-height". Ziemlich geradlinig Eigenschaft, dass keine langatmigen Erklärung bedarf. Wenn ein min-height für eine Teilung eingestellt ist, er behält immer, dass die eingestellte Höhe, wenn der Inhalt es Häuser belegt weniger als es halten kann und vor allem (im Gegensatz zu den Plain-Vanilla "height"-Eigenschaft) Waagen oder in CSS Worten, verhält es sich wie ein Abteilung, deren "Höhe" auf "Auto" eingestellt ...

Für einige von uns armen Entwickler, die noch auf CSS-Code erforderlich sind, das auch in IE6 müssen daran arbeiten, könnte un-Verfügbarkeit der "min-height", eine Show Stopper irgendwann beweisen ... Donot Verzweiflung.

Zum Glück haben wir genug Macken im IE, die wir aus Vorteil zu nutzen und zu hacken unseren Weg durch unser Ziel erreichen würde ... also machen eine Division Division, als ob seine min-height im IE6

Lösung 1: mit dem Unterstrich Hack [ ... Lesen Sie mehr ]

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

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

---

Lösung 2: Mit dem CSS-Attribut-Selektor 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>


Das CSS-Attribut Selector Hack nutzt die Tatsache, die älteren Browsern IE6 tha eine atribute-Selektor ignoriert. Beachten Sie die Forderung nach einem anderen Container Division mit class = "SomeClass". Genau das presense der Klasse Attribut für diesen Bereich, überschreibt die Höhe zurück zum Auto für Opera, Mozilla und MSIE7 und später. IE6, der nicht die atribute Selektoren, ignoriert es.

Demo ansehen der min-height Hack für IE6

Bei verschiedenen Gelegenheiten, während Sie Seitenlayouts mit Popup-Divisionen / Leuchtkästen / Tipps etc wir über Situationen, in denen einige Formular SELECT Objekte geschieht unter diesen Divisionen POPUP sein, durch Design und es zeigt, durch zu kommen .... YUK!

Na ja! Sie könnte leicht beheben, indem eine entsprechende Einstellung Ihrer Z-Index-Werte angemessen für FF und IE7. Aber Good Old (Wortspiel beabsichtigt) IE6 verhält sich nicht wie vorgesehen .... Die SELECT-BOX Show durch, auch nachdem Sie einige drastisch hohe Z-Index-Werte gelten für Ihren PopUp-Division ... Bummer!!

Es gibt keine Updates für dieses Problem, aber es gibt, glaube ich, mehr als ein paar Weg zur Arbeit-um dieses Problem, aber im hier, und sagen Sie die einfachste Lösung, die ich benutze, der gut arbeitet für mich, in den meisten der Fälle ....

"Hide the ROUGE SELECT-BOX Wenn Sie den Listenpfeil SHOW"

Einfach in Ihrem Skript-Schnipsel, wo Sie Ihren Popup zeigen, fügen Sie ein Stück Skript, um die Sichtbarkeit der SELECT-Box auf "Unsichtbar" eingestellt

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

Und denken Sie daran, um sie wieder beim Schließen von PopUp-Division

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

wo "my_select" ist die ID der Reizung SELECT-Box

Hope this helps ...

PS. Es gibt ofcourse andere Optionen wie ein IFRAME dynamisch positionining (gleiche Größe wie Sie PopUp) unter dem Popup-DIV ... Das funktioniert gut, auch, aber mit einem Zusatz von Lasten von DOM-Elementen, Skripte und Kopfschmerzen. Ich habe diese Lösung auch verwendet und wenn Sie Hilfe brauchen mit dieser Option, lass es mich wissen. Gerne helfen!