2011 7. Juli 2011
Wäre dies in einigen Blogs zu lesen ... dachte, es wäre schön, dies für zukünftige ref Katalog .... Auch könnte ein wichtiger Interview Frage sein, dass Sie eines Tages gefragt ....
Schreiben Sie einen kurzen Ausschnitt aus CSS, die einen Absatz in Blau in älteren Browsern, rot in neueren Browsern zeigt, grün in IE6 und IE7 in schwarz
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
keine Kommentare | tags: FF Hacks , IE Hacks | posted in CSS
2008 10. Oktober 2008
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
keine Kommentare | tags: IE Bugs , Fixes IE , IE Hacks , dh Fragen | posted in Browser Tücken , CSS
2008 4. Oktober 2008
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.
keine Kommentare | tags: IE Bugs , Fixes IE , IE Hacks , dh Fragen | posted in Browser Tücken , CSS , HTML
2008 20. Juni 2008
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] ->
keine Kommentare | tags: IE Bugs , Fixes IE , IE Hacks , dh Fragen , IE6 , Tutorials | posted in Browser Tücken , CSS
2008 12. April 2008
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
keine Kommentare | tags: IE Bugs , Fixes IE , IE Hacks , dh Fragen , IE6 , Tutorials | posted in CSS
2008 15. März 2008
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!
keine Kommentare | tags: IE Bugs , Fixes IE , IE Hacks , dh Fragen , IE6 | posted in Browser Tücken , CSS , HTML , JavasScript
2008 8. Januar 2008
Ein paar Monate zuvor sahen wir, wie wir ein Stück von CSS, die sichtbar sein würde, nur IE6 (auch für Ihre IEs Nur ). Es gibt andere Wege, um dies auch zu erreichen. Einfach einen separaten CSS, speziell auf Ihre Ziel-IE. Dies könnte mit der so genannte Conditional Comments erreicht werden.
Conditional Comments ist ein Weg, um den Browser-Typ und-Version erkennen. Browser-Erkennung wird durchgeführt, um sicherzustellen, dass der Gehalt an den Browser spezifischen dargestellt. Browser-Erkennung kann mit vielen verschiedenen Techniken hergestellt werden. Diese Methode hat mehrere Vorteile gegenüber früheren Methoden, die Schalt-Stil mit Hilfe von JavaScript enthalten. Zur Liste wichtiger wenige, wäre;
- Scripting ist nicht erforderlich
- Cross-Browser
Wie tun wir das?
Tun Sie etwas in IE 5 nur
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->
Tun Sie etwas in allen IE-Versionen
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->
Tun Sie etwas in allen IE-Versionen neuer, dass 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 weitere bedingte vartiations, lesen Sie diese Informationen auf MSDN:
Über Conditional Comment
keine Kommentare | tags: IE Bugs , Fixes IE , IE Hacks , dh Fragen | posted in Browser Tücken , CSS , HTML , JavasScript
2007 8. September 2007
Wenn Sie geschrieben haben, während für CSS, müssten Sie erleben diese Zeiten, wenn Sie ziehen buchstäblich die Haare, wenn Ihr CSS-Layouts sah in allen neuen Browsern (ich meine Browser später als IE6) in Ordnung, aber IE 6 bekommt einen Wutanfall. Du hart kämpfen, um Ihre CSS anpassen, aber es funktioniert nicht ... Na ja! Versuchen Sie diese Hacks ...
1. Underscore Hack: -
Per Definition ermöglicht CSS 2.1-Spezifikation Unterstrich ("_") im CSS-IDs. Aber vielen Browsern immer noch scheinbar keinen identifiziert sich mit ein Unterstrich ignorieren ging aber IE. Dieses IE den Bug / Feature wird damit zu einem sehr klaren Weg, um CSS-Eigenschaften für IEs nur eingestellt werden. so denken Sie daran, eine CSS-Eigenschaft mit dem Unterstrich am Anfang geschrieben ist sichtbar für den Internet Explorer (alle Versionen, aber IE 7)
#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}
Vorführung der dies zu unterstreichen hack
Auch die min-height Hack für IE6 Hack den Unterstrich verwendet, bitte zuerst
2. Raute (#) Hack: -
Wie der Hack zu unterstreichen, ist auch dieser ist für IES Oly, mit einem guten Unterschied, Sach-IDs mit # am Anfang vorausgegangen sichtbar für allen IE-Versionen ist, inklusive IE7 und ist für jeden anderen Standard-Browser unsichtbar.
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}
Dieser Hack wurde schön, eine Cross-Browser-Lösung demonstrieren vertikalen Ausrichtung verwendet werden, haben einen Blick auf diese Artikel zu unseren mehr finden
3. CSS für IE6 nur: -
#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*/
}
Diese Hacks scheint Himmel gesandt, wenn es nicht anders geht ... Wenn eine dieser Hacks rettet euer Leben eines Tages, vergessen Sie nicht, mich zu einem Kaffee :) behandeln
keine Kommentare | tags: IE Bugs , Fixes IE , IE Hacks , dh Fragen | posted in Browser Tücken , CSS , JavasScript
2007 12. Juli 2007
Ich hatte dieses Problem, wo, wenn Sie einen mouseover-Event auf einer Division (DIV) und die Teilung hatten, aus irgendeinem Grund musste transparent sein (wie in meinem Fall, wo es erforderlich ist, um einige Tags auf ein Bild angezeigt werden beim Mouseover der wurde Diese transparente Aufteilung), scheiterte IE, um den mouseover-Ereignis (hat gut funktioniert in Firefox) auslösen.
Versuchte mehrere Optionen ... von denen viele war nur ein verzweifelter Versuch, die Veranstaltung erhalten, um in IE zu feuern. Einer der Vernünftigen, dass ich dachte, vielleicht Arbeit war es, eine Hintergrundfarbe zu der Teilung eingestellt und die Deckkraft auf Null ... Naja! DINT Arbeit!
Die endgültige Lösung, die auf Arbeit und nicht stören die Funktionalität, die ich nötig schien, war es, eine ein Pixel gesetzt wiederholt / transparenten Hintergrund Bild in dieser Abteilung
Dumme ...! aber jetzt IE scheint glücklich.
keine Kommentare | tags: IE Bugs , Fixes IE , IE Hacks , dh Fragen | posted in Browser Tücken
2007 11. Juni 2007
Einfache ... Um dieses Problem zu beheben Verwendung Display: inline.
div {float:left;margin:40px;display:inline;}
Wenn Sie eine schwebende Element wie beispielsweise ein div haben und Sie legen margin-right oder margin-left auf dieses Element, wird der Internet Explorer 6.0, dass die Marge verdoppeln Wert, Unordnung zu dem HTML / CSS-Layout. Um dies zu beheben fügen Sie einfach display: inline; zu Ihrem Floating Element.
keine Kommentare | tags: IE Bugs , Fixes IE , IE Hacks , dh Fragen , IE6 | posted in Browser Tücken , CSS
