Ausdruck ihrer IT-

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.

Nicht, dass es nur ein paar LIGHTBOX die, mit dem Sie, wenn Sie Google können. Das Problem mit den meisten der Leuchtkästen, dass ich fand, war, dass sie alle schienen eine oder andere schwere JavaScript-Frameworks wie jQuery, Prototype, MooTools und Ähnliches verwenden. Sie sind alle cool und protzigen suchen. Aber wenn Ihre Forderung ist "aber ich will eine einfache und leichte LIGHTBOX SCRIPT für meine Homepage", dann ist es hier;

Einige nette Features dieses Leuchtkastens

1. Sehr leicht
   ein. 4kb von Scripts, wenn gepackt (8 KB entpackt)
   b. 2 kb von CSS
   c. Nur wenige Zeilen HTML-Container für die lightbox
2. Einfach zu verstehen und umzusetzen
3. Können mehrere Leuchtkästen auf der gleichen Seite haben.
4. Das gleiche Leuchtkasten Behälter verwendet wird für verschiedene Inhalte (die separat als verborgenen Bereiche in der Seite enthalten), abhängig von der Verbindung / Option, die angeklickt wird.
5. Zentriert sich automatisch, unter Berücksichtigung aller Faktoren wie, Fensterhöhe und-breite (Bildschirmauflösung), Seite blättern Betrag und der Höhe der Inhalt der Lightbox
6. Getestet in IE 7 & FF

Demo anzeigen |
Laden Sie Zip Leuchtkasten Quelle (Heruntergeladene 1737 mal)

jo.js, jo_pack.js [gepackte Version]: - ein einfacher Satz von JavaScript-Objekten [JO], das Element, Fenster-und Dokumenten-Positionierung Skripte. Sie können JO.JS öffnen, wenn Sie sich die Hände schmutzig mit einigen fortgeschrittenen JavaScripting, die Schaffung abstrakter Funktionen wünschen, der sich Element-Eigenschaften und so. Wenn Sie nicht zu viel in JavaScripting, lassen sie allein.

lightbox.js, lightbox_pack.js [gepackte Version]: - Enthalten Licht Box Manager Skripte. Wenn Sie Seiten Designer, auch verantwortlich mit der Umsetzung der Lightbox auf der Seite sind, müssen Sie die LightBoxManager verstehen. LightBoxManager enthält im Grunde nur zwei Funktionen showLightBox und closeLightBox.

lightbox.css: - Wenn Sie wissen, CSS, spielen Sie herum kann mit lightbox.css um den Look-n-Gefühl lightbox.css anpassen

index.html: Beispiel für Umsetzung der Lightbox mit zwei verschiedenen Inhalten

lb_underlay_bkg.png: - Dies ist Licht / Simi transparentes Bild, das den Hintergrund für den Leuchtkasten Unterlage verwendet wird [Unterlage ist die Schicht unterhalb der lighbox, die der Benutzer daran gehindert Maustaste auf eine beliebige andere Stelle auf der Seite, während der Lightbox geöffnet ist]. Sie können jedes Bild oder gar eine feste Farbe für diesen Zweck zu verwenden, abhängig von der Seiten-Design und der Anforderung.

icon_lb_close.gif: - Das Bild für ein automatisches System Griff an der oberen rechten Ecke des Licht-Box. Können jedes Bild als pro-Design verwenden

Demo anzeigen |
Laden Sie Zip Leuchtkasten Quelle (Heruntergeladene 1737 mal)

Bitte lassen Sie uns Ihre Kommentare und Rückmeldungen ...

Dieser Beitrag könnte ein gutes Beispiel für die Formulierung "Teaching Oma, Eier zu saugen" zu sein ... Denn dies ist nur grundlegende CSS-Stuff. Aber für diejenigen, die blind wie ich, könnte dies ein Segen sein. Ich dachte immer, (ich könnte meinen Job verlieren, das zu sagen), war es nur möglich, einen Teil der HTML-Seite Inhalte STATIC halten (was bedeutet, bleibt seine Position, wie sie am Fenster zu scrollen), mit einigen intelligenten Skripte, mache ich all jene wissenschaftlichen Berechnungen zu finden, dynamische Position, Trapping Window.scroll Veranstaltungen und Einstellung Timeouts usw.

Hätte nie gedacht, es könnte so einfach wie diese .... Hier in der CSS / HTML unten, ich vier statischen Blöcken, ein aneinander befestigt extrimities der Seite zu haben, oben, rechts, unten und links ... Unnötig zu sagen ... Sie können eines oder mehrere auswählen, wenn es sein muss ...

CSS
. Static {display: block; z-index: 10; color: # ffffff; overflow-x: hidden; overflow-y: hidden; Position: ixed;
}
# Inhalt {margin: 0px 100px 150px 160px; border: 1px solid # e6e6e6}

# Wrap-t {top: 0px; background: # 33CC66; width: 100%; height: 55px;}

# Wrap-l {top: 80px; background: # FF9966; height: 300px; width: 150px; border: 2px solid # e6e6e6;}

# Wrap-b {bottom: 0px; background: # 3333CC; width: 100%; height: 55px;}

# Wrap-r {top: 80px; background: # 6666FF; height: 300px; width: 140px; border: 2px solid # e6e6e6, rechts: 0;}

HTML
<div id="contents"> Sie Hauptseite Inhalt </ div>
<div id="wrap-b" class="static">
Static Content auf der Seite unten
</ Div>
<div id="wrap-t" class="static">
Static Content auf Seitenanfang
</ Div>

<div id="wrap-l" class="static">
Static Content auf der Seite links
</ Div>
<div id="wrap-r" class="static">
Static Content auf der Seite rechts
</ Div>

Sehen Sie sich eine Probe hier wroking

Viele Male haben wir das Bedürfnis verspüren, Browser specfic Hacks zu schreiben (obwohl es nicht eine gute Praxis, wir UI-Entwickler, um solche Übel, bis der große Krieg der Browser zurückgreifen müssen kommt zu einem Waffenstillstand). Zuvor hatte ich in diesem Artikel erwähnten Für Ihre IEs nur , wie man einen CSS-Schnipsel, die sichtbar sein, um IE-Browser würde <IE7 nur zu schreiben.

Gestern hatte ich einen Fall, wo ich wollte etwas FireFox bestimmte CSS-Schnipsel zu schreiben. Na ja! Ich bin nicht sicher ob es eine CSS-Code für diese aber es gibt eine HTML. Es gibt jedoch einen Haken, dieses Stück HTML doesnot Pass HTML-Validierung. Aber, anywaz! Wenn Sie schlecht oder als solche stecken, haben keinen Bezug zur Validierung-(irgendwann müssen wir grausam sein), könnten Sie die folgenden, um einen Link zu einem FF-Stylesheet nur erklären oder auch nur Code der CSS innerhalb dieses Blocks. Der Code ist

Setzen Sie Ihre <comment> FireFox nur HTML / CSS / Scripts hier </ Kommentar>

zB
<comment>
<style>
/ * Styles für FF nur * /
fieldset {border: 1px solid # dddddd;}
</ Style>
</ Kommentar>

I "m froh für den Moment ...

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!

Als ich diesen Artikel zu lesen auf A List Apart " Faux Absolute Positioning
von Eric Sol ", ich war nichts weniger als beeindruckt. Ich war auch majorly, deprimiert verursachen, ehrlich, ich habe mich gefragt, Warum kann ich etwas einfallen lassen, da dies fabelhaft.

Normalerweise, wenn wir CSS-Layouts zu erstellen, verwenden wir "Position" oder "schwebt", oder eine sehr schlechte Kombination aus beidem. Eric Sol und sein Team definieren ein neben perfekter Technik von einer neuen Art von CSS-Layout-Technik, die sie als "Faux Absolute Positioning" nach dem Faux Columns Technik, die das Vorhandensein einer Spalte simuliert wurden getauft.

Du weißt, dieses Problem uns alle CSS-Entwickler haben mit zerfallenden Layouts (Die unerwarteten Veränderungen, die Inhalte ganzer Spalten führen zu wickeln, wenn wir schwebte Layouts verwenden) ... Naja! Scheint Geschichte!!
Dieses Layout-Technik ist noch sehr jung, und muss von all den CSS-Gurus da draußen im Papierkorb, bevor es ein UN-Standard geschrieben wird. Ich bin froh, es jetzt zu nutzen! ... Und bin schon mitten in der Umstellung meiner früheren problematischen / Floating unnötigerweise Layouts in FAP Layout schon ... und ich bin froh zu sagen, das "Wir arbeiten bereits mit Faux Absolute Positioning für dieses Blog-Site als auch" ... Gehen Sie versuchen es, JETZT!

Kudos Eric!

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

Setzen Sie Stylesheets an der Spitze

Wenn Sie eine Seite zu laden wollen progressiv, das heißt, wir wollen den Browser, um anzuzeigen, was auch immer es Inhalte so schnell wie möglich hat, setzen die CSS am oberen Rand der Seite innerhalb des Dokuments HEAD. Das macht Seiten angezeigt werden, schneller zu sein Laden, da dies ermöglicht eine progressive Darstellung der Seite. Dies ist besonders wichtig für Seiten mit viel Inhalt und für die Nutzer bei langsameren Internet-Verbindungen.

Es ist eine dokumentierte Tatsache, dass die allgemeine Benutzerfreundlichkeit zu verbessern, ist es wichtig, Statusanzeigen und visuelle Rückmeldungen geben. Um zu vermeiden, Elemente der Seite neu zu zeichnen, für den Fall, wenn ihre Stile ändern, manche Browser, inklusive IE, Blöcke Version der Seite, bis der CSS voll beladen ist. Aus diesem Grund ist der Benutzer zu sehen bekommt Eine leere weisse Seite.

Die W3 HTML-Spezifikationen "auch fest, dass die CSS muss mich im HEAD-Abschnitt der HTML-Seite einbinden. at the bottom of the page, so it's best not to use it. Beachten Sie auch, dass im IE @import die gleiche verhält sich wie mit <link> am unteren Rand der Seite, also ist es am besten nicht zu benutzen.

Vermeiden der Verwendung von Browser unabhängig

Filter: Die Verwendung von Filter erhöht Speicherverbrauch und pro Element angelegt wird, nicht pro Bild, so dass das Problem multipliziert wird. Auch Filter IE proprietär sind, wird daher nicht wie vorgesehen in anderen Browsern. Wenn Sie transparente oder Gradienten Hintergründe möchten, verwenden Sie 1 Pixel mit Bildern.
Expressions: CSS-Ausdrücke sind ein nettes Feature, um in CSS haben, aber noch ist IE Besonderheit. Es ist auch wichtig anzumerken, dass, sind diese Ausdrücke ausgewertet, wenn die Seite gerendert wird und in der Größe, gescrollt und auch wenn der Benutzer die Maus über die Seite. Unnötig zu sagen, könnte dies die Performance Ihrer Seite auswirken. Daher wird in einfachen Worten, Vermeiden Sie die Verwendung CSS Ausdrücke, es sei denn, Sie fühlen sich seine Profis "wiegt mehr als seine Nachteile"

Externalisieren Sie CSS

Die Verwendung externer CSS wird in schnelleres Laden der Folge Seiten, da die JavaScript-und CSS-Dateien vom Browser zwischengespeichert sind. Inline-CSS in HTML-Dokumenten erhalten jedes Mal, wenn das HTML-Dokument angefordert wird heruntergeladen. Dies könnte in der Tat die Zahl der HTTP-Anfragen gemacht, aber es anschließend erhöht die Größe des HTML-Dokuments. Externe CSS sind vom Browser zwischengespeichert werden, die Größe des HTML-Dokuments ist ohne die Erhöhung der Anzahl von HTTP-Anfragen reduziert.

Bitte beachten Sie, dass, wenn Nutzer auf Ihrer Website mehrere Seitenaufrufe pro Session haben und viele von Ihren Seiten wieder verwenden die gleichen Skripte und Stylesheets, gibt es eine größere potentielle Nutzen von externen Dateien zwischengespeichert.

Packen Sie Ihre CSS-Datei

Verpackung oder Knirschen Ihrer CSS ist die Praxis der Beseitigung unnötiger Zeichen aus Code, um seine Größe reduzieren damit die Verbesserung der Ladezeiten.

Die CSS kann mir knirschte durch Entfernen aller Kommentare und unerwünschte Zeichen wie Leerzeichen, Zeilenumbrüche usw.

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