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 6. Juni 2008
Mehr die DOM-Elemente auf der Seite, es macht langsamer, langsamer ist der DOM-Zugriff in der JavaScript. Eine hohe Anzahl von DOM-Elementen kann durch schlechte Layout-Design sein. Zum Beispiel könnte verschachtelte Tabellen zu Layout-Zwecken verwendet worden sein. Verwenden Sie ein beliebiges HTML-Tag, wo sinnvoll ist semantisch. Für zB DONOT Verwendung Tabellen für Layouts, aber DONOT zögern, sie zu benutzen, an der Sie tabellarische Daten dargestellt werden, und wird daher verwenden DOM-Elemente zu reduzieren, im Vergleich zu einer ähnlichen Struktur erstellt mit DIVs nur ..
Um die Anzahl der DOM-Elemente in Ihre HTML-Seite zu testen, geben Sie einfach folgendes in der Firebug-Konsole: document.getElementsByTagName('*').length
Es gibt keinen festgelegten Standard, wie viele DOM-Elemente sind zu viele. Überprüfen Sie andere ähnliche Seiten, die gute markup.Eg haben. Yahoo! Homepage ist eine Seite ziemlich beschäftigt und immer noch unter 700 Elemente (HTML-Tags).
keine Kommentare | Tags: Best Practices , DOM | posted in Best Practices , User Interface Desgin
2008 2. Juni 2008
Verwenden Sie GET Requests für AJAX
Es wurde festgestellt, dass bei der Verwendung von XMLHttpRequest, POST in den Browsern wird als zweistufigen Prozess implementiert: Senden der Header zuerst, dann das Senden von Daten. Also ist es am besten zu nutzen GET, das dauert nur ein TCP-Paket zu senden (sofern Sie nicht eine Menge von Cookies haben). Die maximale URL-Länge im IE ist 2K, also, wenn Sie mehr als 2K Daten senden Sie vielleicht nicht in der Lage, verwenden zu können.
Eine interessante Seite beeinflussen ist, dass POST, ohne tatsächlich das Einstellen von Daten verhält sich wie GET. Wird zum Abrufen von Informationen gemeint GET, so macht es Sinn (semantisch) zu bekommen verwenden, wenn Sie nur beantragt sind Daten, wie zum Senden von Daten an Server-Seite gespeichert werden, entgegen.
Vermeiden Sie Synchronous AJAX-Aufrufe
Bei der "Ajax" Anfragen, können Sie entweder async oder sync-Modus. Async-Modus läuft die Anfrage im Hintergrund, während andere Browser-Aktivitäten weiterhin zu verarbeiten. Sync-Modus wird für die Anfrage an, bevor Sie fortfahren Rückkehr zu warten.
Anfragen mit Sync-Modus gemacht sollte vermieden werden. Diese Anfragen werden dazu führen, den Browser zu sperren für den Benutzer, bis die Anforderung Renditen. In Fällen, in denen der Server ausgelastet ist und die Reaktion dauert eine Weile, den Browser des Benutzers (und vielleicht OS) wird nicht zulassen, irgendetwas anderes zu tun. In Fällen, wo eine Antwort nie richtig empfangen wird, kann der Browser weiterhin blockieren, bis die Anfrage das Zeitlimit überschritten.
Wenn Sie denken, dass Ihre Situation Sync-Modus erfordert, ist es wahrscheinlich Zeit zu überdenken Ihrem Design. Nur sehr wenige (wenn überhaupt) Situationen tatsächlich benötigen Ajax-Requests im Sync-Modus.
1 Kommentar | tags: AJAX , Best Practices | posted in AJAX , Best Practices , User Interface Desgin