Zusammenfassung der CSS- und XTHML-Schreibstandards und häufigen Probleme (Seitenoptimierung)

Projektdokumentationsverzeichnis
Div+CSS-Benennungsstandards - 4 -
Div+CSS-Namenskonvention - 4 -
1.1. div+css Namenskonvention - 4 -
1.2. CSS-ID-Benennungsstandards - 4 -
1.3. Dateibenennung im CSS-Stil - 5 -
XHTML-Codierung - Grundlegende Spezifikationen - 6 -
XHTML-Codierung - Grundlegende Spezifikationen - 6 -
Empfohlene Standards für das Webseiten-Design - 10 -
Empfohlene Standards für das Webseiten-Design - 10 -
Gängige CSS-Optimierungstechniken - 11 -
Zusammenfassung der CSS-Browserkompatibilitätsprobleme - 20 -
Zusammenfassung zur JavaScript-Browserkompatibilität - 30 -
Der Einfluss des XHTML-Standard-DIV+CSS-Layouts auf die SEO von Websites - 35 -

Div+CSS-Namenskonvention
Div+CSS-Namenskonvention
Bei CSS-Namen muss die Groß-/Kleinschreibung beachtet werden. Es wird empfohlen, ausschließlich Kleinbuchstaben zu verwenden. Im Folgenden sind die besten Benennungsrichtlinien zusammengefasst. Eine gute Benennung ist nicht nur für Betreuer leichter zu lesen, sondern bietet auch große Vorteile für die Suchmaschinenoptimierung (SEO). Unter diesen ist die Codeoptimierung ein entscheidender Schritt. Um SEO-Standards besser einzuhalten, sind im Folgenden die derzeit gängigen CSS+DIV-Benennungsregeln mit einigen Ergänzungen aufgeführt:
1.1. Div+CSS-Namenskonventionen Header:Header
Anmeldeleiste: loginBar
Logo:
Seitenleiste: Seitenleiste
Werbung: Banner
Navigation: nav
Unternavigation: subNav
Menü:Menü
Untermenü: Untermenü
Suche:Suche
Scrollen: scrollen
Seitentext:main
Inhalt:
Tab:Tab
Artikelliste:Liste
Eingabeaufforderungsnachricht: msg
Tipps:
Spaltentitel: Titel
Freund-Link:
Fußzeile: Fußzeile
Beitreten: joinus
Anleitung:Gilde
Service:
Heißer Punkt: heiß
Nachrichten: Nachrichten
Herunterladen: herunterladen
Registrierung: regsiter
Status: Status
Taste:btn
Abstimmen:Abstimmen
Partner:Partner
Urheberrecht:copyRightProduktmanagement

1.2. CSS-ID-Benennungsstandards

Jacke: Wickeljacke
Hauptnavigation: mainNav
Unternavigation: Subnav
Fußzeile: Fußzeile
Die gesamte Seite: Inhalt
Kopfzeile:Kopfzeile
Fußzeile: Fußzeile
Warenzeichen: Etikett
Titel: Titel
Hauptnavigation: mainNav(globalNav)
Top-Navigation: Topnav
Seitennavigation: Seitenleiste
Linke Navigation: leftsideBar
Rechte Navigation: rechte Seitenleiste
Flagge:Logo
Slogan: Banner
Menüinhalt 1:menu1Inhalt
Menükapazität: menuContainer
Untermenü:Untermenü
Seitliches Navigationssymbol: sidebarIcon
Notiz:
BreadCrumbs: BreadCrumb (d. h. Navigationshinweis zum Standort der Seite)
Behälter:Behälter
Inhalt:
Suche:Suche
Anmeldung: Anmelden
Funktionsbereich: Shop (z.B. Warenkorb, Kasse)
Aktuell: aktuell

1.3. Benennung von CSS-Style-Dateien main: master.css
Layout: layout.css
Spalten: columns.css
Text: font.css
Druckstil: print.css
Themen: themes.css
Allgemein: basic.css

Die obige Namenskonvention ist sehr intuitiv. Auch wenn der Programmierer keine Kommentare hinzufügt, wissen wir genau, was sie bedeutet. Die oben genannten Benennungen decken fast alle häufig verwendeten Stile ab.

Grundlegende Spezifikationen für die XHTML-Codierung

Grundlegende Spezifikationen für die XHTML-Codierung
2.1 Alle Tags müssen ein entsprechendes End-Tag haben. XHTML erfordert eine strikte Struktur, alle Tags müssen geschlossen sein. Wenn es sich um ein einzelnes, ungepaartes Tag handelt, fügen Sie am Ende des Tags ein "/" hinzu, um es zu schließen. Zum Beispiel:
<img height="80" alt="Web Designer" src="/uploadfile/200806/17/8C162625950.gif" width="200" />

2.2 Die Namen aller Elemente und Attribute von Tags müssen klein geschrieben sein. Im Gegensatz zu HTML unterscheidet XHTML zwischen Groß- und Kleinschreibung. <title> und <TITLE> sind unterschiedliche Tags. XHTML erfordert, dass alle Tag- und Attributnamen klein geschrieben sein müssen. Beispiel: <BODY> muss als <body> geschrieben werden. Auch das Mischen von Groß- und Kleinbuchstaben ist nicht zulässig.

2.3 Alle XHTML-Tags müssen richtig verschachtelt sein. Da XHTML außerdem eine strenge Struktur erfordert, muss die Verschachtelung in der richtigen Reihenfolge erfolgen. In der Vergangenheit haben wir Code wie diesen geschrieben:
<p><b></p>/b> muss geändert werden in: <p><b></b>/p>
Das heißt, die Verschachtelungsebenen müssen streng symmetrisch sein.

2.4 Alle Attribute müssen in Anführungszeichen "" eingeschlossen werden. In HTML müssen Sie Attributwerte nicht in Anführungszeichen setzen, in XHTML jedoch schon. Zum Beispiel:
<height=80> muss geändert werden in: <height="80">
In besonderen Fällen müssen Sie im Attributwert doppelte Anführungszeichen verwenden. Sie können " verwenden, und einfache Anführungszeichen können ' verwendet werden, zum Beispiel:
<alt="sag'hallo'">

2.5 Alle Sonderzeichen < und & kodieren. Jedes Kleiner-als-Zeichen (<), das nicht Teil eines Tags ist, muss als < kodiert werden.
Jedes Größer-als-Zeichen (>), das nicht Teil eines Tags ist, muss als > codiert werden.
Jedes Et-Zeichen (&), das nicht Teil einer Entität ist, muss als & codiert werden.

2.6 Allen Attributen einen Wert zuweisen
XHTML legt fest, dass alle Attribute einen Wert haben müssen und dass sich die Attribute ohne Wert wiederholen müssen. Zum Beispiel:
<td nowrap> <Eingabetyp="Kontrollkästchen" Name="Shirt" Wert="mittel" aktiviert>
Muss wie folgt geändert werden:
<td nowrap="nowrap"> <input Typ="Kontrollkästchen" Name="Shirt" Wert="mittel" aktiviert="aktiviert">

2.7 Verwenden Sie in Kommentaren kein „–“
"–" dürfen nur am Anfang und Ende eines XHTML-Kommentars vorkommen, sind also innerhalb des Inhalts nicht mehr gültig. Beispielsweise ist der folgende Code ungültig:
<!–Hier kommentieren———–Hier kommentieren–>
Ersetzen Sie die inneren Bindestriche durch Gleichheitszeichen oder Leerzeichen.
<!–Hier kommentieren============Hier kommentieren–>
Einige der oben genannten Spezifikationen mögen seltsam erscheinen, aber sie alle dienen dazu, unserem Code einen einheitlichen und einzigartigen Standard zu verleihen, um die zukünftige Wiederverwendung von Daten zu erleichtern.

2.8 Das Typattribut kann beim Verweisen auf Stile und Skriptsprachen nicht weggelassen werden
<script language="javascript" type="text/javascript">
Hinweis: type="text/javascript" kann nicht weggelassen werden.

2.9 Achten Sie beim Schreiben von JavaScript-Methoden auf einer Seite darauf, Kommentarsymbole hinzuzufügen. Dadurch werden Fehler vermieden, die durch Sonderzeichen wie >, <, && verursacht werden:
Der Inhalt der Tags <script> und <style> muss in einem CDATA-Abschnitt eingeschlossen werden.
Zum Beispiel:
<Skripttyp="text/javascript">
<![CDATA[
Funktion func(a, b)
{
wenn (a < b)
gibt true zurück;
}
]]> </script>
Beachten Sie, dass das obige Skript ein Kleiner-als-Zeichen (<) enthält. Wenn es nicht in einen CDATA-Abschnitt eingeschlossen ist, werden das Kleiner-als-Zeichen (<) und der folgende Inhalt fälschlicherweise für den Anfang eines anderen XHTML-Tags gehalten, was zu einigen unnötigen Fehlern führt.
Beachten Sie, dass der IE den CDATA-Abschnitt im <script>-Tag als ungültig betrachtet und einen Skriptfehler verursacht. Dieses Problem kann gelöst werden durch
Zu vermeidende JavaScript-Kommentare:
<Skripttyp="text/javascript">
/* <![CDATA[ */
Funktion func(a, b)
{
wenn (a < b)
gibt true zurück;
}
/* ]]> */
</Skript>
oder
<Skripttyp="text/javascript">
// <![CDATA[
Funktion func(a, b)
{
wenn (a < b)
gibt true zurück;
}
// ]]>
</Skript>
Der beste Ansatz besteht natürlich darin, die Skripte und CSS in separaten Dateien zu platzieren und auf der XHTML-Seite darauf zu verweisen.

2.10 Alle Stile in den Stil einfügen. Beispiel: <td width="4"> </td> Dies entspricht nicht dem Standard.
Wir sollten so schreiben: <td style=”width:4px;”> </td>

2.11 Dem letzten Stilattribut muss ein Semikolon folgen

2.12 Verwenden Sie das ID-Attribut anstelle des Name-Attributs.
In HTML kann das Name-Attribut verwendet werden, um die Tags <a>, <applet>, <form>, <frame>, <iframe>, <img> und <map> zu identifizieren. Die Standards XHTML 1.0 Strict und XHTML 1.1 haben die Unterstützung für das Namensattribut entfernt. Wir sollten eine ID verwenden, um ein Element auf einer Seite eindeutig zu identifizieren. IDs können nicht wiederholt werden.

2.13 Umgang mit Leerzeichen in Attributwerten.
Eventuelle führende und nachfolgende Leerzeichen in Attributwerten werden ignoriert. Mehrere Leerzeichen oder Zeilenumbrüche zwischen Wörtern in einem Attributwert werden als ein einzelnes Leerzeichen behandelt. Beispielsweise haben die folgenden beiden Attribute denselben Wert:
<input value="HTML ist aus" />
<input value=" HTML ist
aus " />

2.14 Verwenden Sie geeignete Dokumenttypdeklarationen und Namespaces.

2.15 Verwenden Sie das Metaelement, um Ihren Inhaltstyp zu deklarieren.

2.16 Wenn Sie img verwenden, fügen Sie das Alt-Attribut hinzu, das leer gelassen werden kann.

2.17 Bei Verwendung von img schlägt das Attribut align=absmiddle bei der W3C-Validierung fehl. Wie wir alle wissen, können Sie das Attribut align=absmiddle zum IMG-Tag hinzufügen, wenn Sie Bild und Text vertikal zentriert ausrichten möchten. Das Attribut align=absmiddle schlägt jedoch bei der W3C-Validierung fehl [die Validierungsadresse finden Sie unter der Adresse des W3C-Webseiten-Standardvalidierungsservice]. Kann also CSS verwendet werden, um das Attribut align=absmiddle von IMG zu ersetzen und so eine vertikale Zentrierung zu erreichen? Die Antwort ist ja.
Dies kann durch das Hinzufügen von vertical-align:middle; zu CSS erreicht werden.

Fall:
<div><img style="vertical-align:middle;" src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />Verwenden Sie CSS, um Bilder und Text vertikal zu zentrieren</div><br /><br />
<div><img src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />Dies ist der Effekt ohne hinzugefügten Stil</div><br /><br />
<div><img align=absmiddle src="/uploadfile/png/IconBuffet/Redmond/close_32.png" />Hierbei wird align=absmiddle verwendet, um Bild und Text vertikal auszurichten</div>

2.18 Veraltete Attribute und Tags werden nicht empfohlen. Um Kompatibilitätsprobleme von Websites besser handhaben zu können, empfehle ich, veraltete Tags und Attribute nicht zu verwenden.

2.19 Passen Sie die VS2005-Validierungsstandards an XHTML1.0 oder höher an

Bemerkung:
Probleme mit dem Übergangs-Webstandard XHTML 1.0 Die einst beliebte Auszeichnungssprache HTML gilt offiziell als veraltet und wird durch XHTML (http://www.w3.org/MarkUp/) ersetzt. Wenn Ihre Website gemäß strengeren XHTML-Regeln geschrieben ist, behält die Website in verschiedenen Browsern einen einheitlichen Stil. Und Sie können davon ausgehen, dass das Erscheinungsbild Ihrer Website bei zukünftigen Browser-Upgrades konsistent bleibt. Sie erhalten außerdem konsistente Unterstützung für alle Browser, Geräte und Plattformen.
XHTML hat zwei Hauptziele:
Trennen Sie die Struktur des Dokuments (mithilfe der Auszeichnungssprache XHTML) von seiner Präsentation (mithilfe von CSS).
· Schreiben Sie HTML als XML. Für das erste Ziel hat das W3C einige HTML-Tags und -Attribute wie <font> und bgcolor gelöscht, da diese Tags oder Attribute nicht Teil der Dokumentstruktur sind, sondern nur dazu dienen, zu beschreiben, wie das Dokument angezeigt werden soll. Sie sollten daher in CSS-Dateien statt in HTML definiert werden. Ebenso müssen bestimmte getaggte Inhalte nicht zwangsläufig in einer bestimmten Art und Weise erscheinen. Beispielsweise kann die Schriftgröße des Inhalts im <h1>-Tag kleiner sein als die des Inhalts im <p>-Tag, abhängig von der Definition in CSS. Natürlich wird <h1> im Allgemeinen verwendet, um die Titelinformationen eines Dokuments anzuzeigen. Seine Bedeutung sollte im Allgemeinen höher sein als der Inhalt in <p>, sodass die meisten Browser es in einer größeren Schriftgröße anzeigen.
Für das zweite Ziel hält sich XHTML strikt an die strenge Syntax von XML. Man kann sagen, dass XHTML das Ergebnis einer HTML-Rekonstruktion gemäß der XML-Syntax ist. Mit anderen Worten: Wenn Sie ein XHTML-Dokument schreiben, schreiben Sie eigentlich ein spezialisiertes XML-Dokument. XML-Dokumente haben eine viel strengere Syntax als HTML, worauf später in diesem Artikel eingegangen wird.
Es gibt drei Versionen von XHTML:
XHTML 1.0 Übergangsversion
XHTML 1.0 Strict
XHTML 1.0-Frameset
XHTML 1.0 Transitional enthält alle Tags und Attribute von HTML 4.01. Es handelt sich um ein weniger strenges XHTML. Sein Zweck besteht darin, bestehenden HTML-Entwicklern die Akzeptanz und Verwendung von XHTML zu erleichtern.
XHTML 1.0 Strict ist eine strikte Version von XHTML. Entwickler müssen sich strikt an die Regel halten, Struktur und Präsentation des Dokuments zu trennen. Das heißt, die Anzeige der Seite sollte mithilfe von CSS gesteuert werden, anstatt Tags oder Attribute wie <font> und bgcolor zu verwenden.
XHTML 1.0 Frameset wird verwendet, um ein Dokument in mehrere Frames aufzuteilen, um unterschiedliche Inhalte anzuzeigen. (XHTML 1.0 Transitional- und Strict-Seiten dürfen das Tag <frameset> nicht enthalten).
Ich werde hier nicht näher auf XHTML eingehen. Wenn Sie interessiert sind, können Sie mit Google oder MSN Search viele relevante Informationen oder detaillierte Einführungen finden. Gerne können Sie auch Ihre Anmerkungen und Fragen unter diesem Beitrag hinterlassen, lassen Sie uns gemeinsam diskutieren. Es folgen einige grundlegende Regeln zum Schreiben von XHTML.
Referenz-URL: http://www.cnblogs.com/plain-heart/archive/2008/04/17/1158909.html
http://www.chinaz.com/Design/Pages/10091JN2007.html

Empfohlene Standards für das Webseiten-Design

Empfohlene Standards für das Webseiten-Design
3.1 Namenskonventionen

Grundsätze zur Dateibenennung:
Verwenden Sie möglichst wenige Buchstaben, um eine möglichst verständliche Bedeutung zu erreichen.

Allgemeine Konventionen für die Benennung von Dateien und Verzeichnissen:
Jedes Verzeichnis sollte eine Standard-HTML-Datei mit dem Dateinamen index.htm enthalten. Dateinamen sollten eine Kombination aus englischen Kleinbuchstaben, Zahlen und Unterstrichen enthalten und so weit wie möglich aus englischen Wörtern übersetzt sein. Zum Beispiel: feedback (Rückmeldung), aboutus (Über uns). Mehrere Dateien desselben Typs werden mit englischen Buchstaben und Zahlen benannt, und die Buchstaben und Zahlen werden durch _ getrennt. Beispiel: news_01.htm. Beachten Sie, dass die Anzahl der Ziffern proportional zur Anzahl der Dateien ist und fehlende Ziffern mit 0 aufgefüllt werden. Beispielsweise gibt es 200 Nachrichten und die 18. Nachricht heißt news_018.htm
Konventionen zur Bildbenennung:
Der Name besteht aus zwei Teilen, dem ersten und dem letzten, die durch einen Unterstrich getrennt sind.
Der Kopfteil gibt die allgemeine Natur dieses Bildes an. Beispiele: Rechteckige Bilder, wie etwa Anzeigen und dekorative Muster, die oben auf der Seite platziert werden, benennen wir mit „Banner“. Symbolbilder benennen wir mit „Logo“. Kleine Bilder mit Links, die nicht fest auf der Seite verankert sind, benennen wir mit „Schaltfläche“. Bilder von Link-Spalten, die fortlaufend an einer bestimmten Position auf der Seite erscheinen und dieselbe Beschaffenheit haben, benennen wir mit „Menü“. Dekorative Fotos benennen wir mit „Bild“. Bilder ohne Links, die Titel darstellen sollen, benennen wir mit „Titel“ usw. Der Schwanzteil dient zur Angabe der spezifischen Bedeutung des Bildes und wird in englischen Buchstaben ausgedrückt. Beispiel: banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.
Bei den Bildern mit Onmouse-Effekt werden die beiden Bilder durch Hinzufügen von „_on“ und „_off“ an das Ende des ursprünglichen Dateinamens benannt.
Andere Dateibenennungskonventionen:
Das Benennungsprinzip von js besteht darin, englische Wörter für die Funktionen zu verwenden. Beispiel: Der JS-Dateiname des Werbebanners lautet: ad.js
Alle CGI-Dateien haben die Endung cgi. Die Konfigurationsdatei für alle CGI-Programme ist config.cgi

3.2 Spezifikation der Verzeichnisstruktur Das Prinzip der Verzeichniserstellung besteht darin, eine möglichst klare und einfache Zugriffsstruktur mit der geringsten Anzahl von Ebenen bereitzustellen.
Der Verzeichnisname besteht aus englischen Kleinbuchstaben und Unterstrichen. (Siehe Namenskonventionen)
Im Stammverzeichnis werden normalerweise nur index.htm und andere notwendige Systemdateien gespeichert. Jede Hauptspalte hat ein entsprechendes unabhängiges Verzeichnis. Das Bilderverzeichnis unter dem Stammverzeichnis wird zum Speichern öffentlicher Bilder verwendet, die von allen Seiten verwendet werden, und das Bilderverzeichnis unter dem Unterverzeichnis speichert private Bilder, die von den Seiten dieser Spalte verwendet werden. Alle JS-Skripte werden im Skriptverzeichnis unter dem Stammverzeichnis gespeichert. Alle CSS-Dateien werden im App_theme-Verzeichnis unter dem Stammverzeichnis gespeichert. Alle Flash-, AVI-, RAM-, Quicktime- und anderen Multimediadateien werden im Medienverzeichnis unter dem Stammverzeichnis gespeichert.

Gängige CSS-Optimierungstechniken
Gängige CSS-Optimierungstechniken
4.1. Verwenden Sie CSS-Abkürzungen. Die Verwendung von Abkürzungen kann dazu beitragen, die Größe Ihrer CSS-Dateien zu reduzieren und sie leichter lesbar zu machen. Die wichtigsten Regeln zu CSS-Abkürzungen finden Sie in der „Zusammenfassung der Syntax gängiger CSS-Abkürzungen“, die hier nicht im Detail beschrieben wird.
Referenz-Website: http://homepage.yesky.com/97/7643097.shtml

4.2. Definieren Sie die Einheit explizit, es sei denn, der Wert ist 0
Das Vergessen, die Einheiten für die Abmessungen zu definieren, ist ein häufiger Fehler von CSS-Anfängern. In HTML können Sie einfach width=100 schreiben, in CSS müssen Sie jedoch eine genaue Einheit angeben, etwa: width:100px width:100em. Es gibt nur zwei Ausnahmen, bei denen Sie Einheiten undefiniert lassen können: Zeilenhöhe und Nullwert. Abgesehen davon muss allen anderen Werten die Einheit folgen. Achten Sie darauf, dass zwischen Wert und Einheit keine Leerzeichen eingefügt werden.
4.3. Groß-/Kleinschreibung beachten: Bei der Verwendung von CSS in XHTML muss bei den in CSS definierten Elementnamen die Groß-/Kleinschreibung beachtet werden. Um diesen Fehler zu vermeiden, empfehle ich, für alle Definitionsnamen Kleinbuchstaben zu verwenden.
Auch bei den Werten von Klasse und ID wird in HTML und XHTML zwischen Groß- und Kleinschreibung unterschieden. Wenn Sie Groß- und Kleinschreibung verwenden müssen, stellen Sie bitte sicher, dass Ihre CSS-Definition mit den Tags in XHTML übereinstimmt.
4.4. Aufheben der Elementeinschränkung vor Klasse und ID Wenn Sie für ein Element eine Klasse oder ID definieren, können Sie die davor stehende Elementeinschränkung weglassen, da die ID innerhalb einer Seite eindeutig ist und die Klasse mehrfach auf der Seite verwendet werden kann. Es macht keinen Sinn, sich auf ein bestimmtes Element zu beschränken. Zum Beispiel:
div#content { /* Deklarationen */ }
fieldset.details { /* Deklarationen */ }
Kann geschrieben werden als
#content { /* Deklarationen */ }
.details { /* Deklarationen */ }
Dadurch werden einige Bytes gespart.
4.5. Standardwerte Normalerweise ist der Standardwert für die Polsterung 0 und der Standardwert für die Hintergrundfarbe ist transparent. Allerdings können die Standardwerte in verschiedenen Browsern unterschiedlich sein. Wenn Sie Konflikte befürchten, können Sie die Rand- und Füllwerte aller Elemente am Anfang des Stylesheets wie folgt auf 0 setzen:
* {
Rand: 0;
Polsterung: 0;
}

4.6. Keine Notwendigkeit, geerbte Werte neu zu definieren
In CSS erben untergeordnete Elemente automatisch die Attributwerte übergeordneter Elemente, beispielsweise Farbe und Schriftart. Diejenigen, die im übergeordneten Element definiert wurden, können direkt an das untergeordnete Element vererbt werden, ohne dass eine wiederholte Definition erforderlich ist. Beachten Sie jedoch, dass der Browser Ihre Definitionen möglicherweise mit einigen Standardwerten überschreibt.
4.7. Das Prinzip der nächsten Priorität Wenn es mehrere Definitionen desselben Elements gibt, hat die nächste (niedrigste) Definition Vorrang. Es gibt beispielsweise einen solchen Code
Update: Lorem ipsum dolor gesetzt
In der CSS-Datei haben Sie das Element p und eine Klasse update definiert.
P {
Rand: 1em 0;
Schriftgröße: 1em;
Farbe: Nr. 333;
}
.aktualisieren {
Schriftstärke: fett;
Farbe: Nr. 600;
}
Von diesen beiden Definitionen wird class=update verwendet, da class aktueller ist als p. Weitere Informationen finden Sie im W3C-Artikel „Berechnen der Spezifität eines Selektors“.
4.8. Mehrere Klassendefinitionen Ein Tag kann mehrere Klassen gleichzeitig definieren. Beispiel: Wir definieren zunächst zwei Stile. Der erste Stil hat einen Hintergrund von #666; der zweite Stil hat einen 10-Pixel-Rand.
.one{width:200px;background:#666;}
.zwei{border:10px durchgezogen #F00;}
Im Seitencode können wir aufrufen
<div Klasse="eins zwei"></div>
Der endgültige Anzeigeeffekt besteht darin, dass dieses Div sowohl einen #666-Hintergrund als auch einen 10px-Rand hat. Ja, das ist möglich, Sie können es versuchen.
4.9. Verwendung von Nachkommenselektoren
Einer der Gründe, warum CSS-Anfänger langsamer arbeiten, ist, dass sie nicht wissen, wie man untergeordnete Selektoren verwendet. Mithilfe von untergeordneten Selektoren können Sie viele Klassendefinitionen einsparen. Schauen wir uns den folgenden Code an:
<div id=Unternavigation>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>Element 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> Element 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> Element 1</a> </li>
</ul>
</div>
Die CSS-Definition für diesen Code lautet:
div#subnav ul { /* Etwas Styling */ }
div#subnav ul li.subnavitem { /* Etwas Styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Etwas Styling */ }
div#subnav ul li.subnavitemselected { /* Etwas Styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Etwas Styling */ }
Sie können den obigen Code durch den folgenden ersetzen
<ul id=Unternavigation>
<li> <a href=#> Artikel 1</a> </li>
<li class=sel> <a href=#> Artikel 1</a> </li>
<li> <a href=#> Artikel 1</a> </li>
</ul>
Die Stildefinition lautet:
#subnav { /* Etwas Styling */ }
#subnav li { /* Etwas Styling */ }
#subnav a { /* Etwas Styling */ }
#subnav .sel { /* Etwas Styling */ }
#subnav .sel a { /* Etwas Styling */ }
Durch die Verwendung untergeordneter Selektoren können Sie Ihren Code und CSS prägnanter und leichter lesbar machen.

4.10. Der Pfad des Hintergrundbilds muss nicht in Anführungszeichen gesetzt werden. Um Bytes zu sparen, empfehle ich, den Pfad des Hintergrundbilds nicht in Anführungszeichen zu setzen, da die Anführungszeichen nicht erforderlich sind. Zum Beispiel:
Hintergrund:URL(Bilder/***.gif) #333;
Es kann geschrieben werden als
Hintergrund:URL(Bilder/***.gif) #333;
Das Hinzufügen von Anführungszeichen führt in einigen Browsern zu Fehlern.
4.11. Gruppenselektoren
Wenn einige Elementtypen, Klassen oder IDs einige gemeinsame Attribute haben, können Sie Gruppenselektoren verwenden, um wiederholte Definitionen zu vermeiden. Dadurch können einige Bytes gespart werden.
Um beispielsweise die Schriftart, Farbe und den Rand aller Titel festzulegen, können Sie Folgendes schreiben:
h1,h2,h3,h4,h5,h6 {
Schriftfamilie: Lucida Grande, Lucida, Arial, Helvetica, serifenlos;
Farbe: Nr. 333;
Rand: 1em 0;
}
Wenn Sie während der Verwendung unabhängige Stile für einzelne Elemente definieren müssen, können Sie neue Definitionen hinzufügen, um die alten zu überschreiben, zum Beispiel:
h1 { Schriftgröße:2em; }
h2 { Schriftgröße:1,6em; }
4.12. Link-Stile in der richtigen Reihenfolge angeben Wenn Sie CSS verwenden, um mehrere Statusstile eines Links zu definieren, achten Sie auf die Reihenfolge, in der sie geschrieben werden. Die richtige Reihenfolge ist: :link :visited :hover :active. Der erste gezogene Buchstabe ist LVHA, was Sie sich als LoVe HAte (wie Hass) merken können. Weitere Informationen zu dieser Definition finden Sie in „Link Specificity“ von Eric Meyer.
Wenn Ihre Benutzer zur Steuerung die Tastatur verwenden müssen und den Fokus des aktuellen Links wissen müssen, können Sie auch das Attribut :focus definieren. Die Wirkung des Attributs :focus hängt auch davon ab, wo Sie es schreiben. Wenn Sie möchten, dass das fokussierte Element den :hover-Effekt zeigt, schreiben Sie :focus vor :hover; wenn Sie möchten, dass der Fokuseffekt den :hover-Effekt ersetzt, schreiben Sie :focus nach :hover.
4.13. Floats löschen Ein sehr häufiges CSS-Problem besteht darin, dass bei der Positionierung mit Floats die darunterliegende Ebene von der Float-Ebene überdeckt wird oder die verschachtelten Unterebenen in der Ebene den Umfang der äußeren Ebene überschreiten.
Die übliche Lösung besteht darin, nach dem Float ein zusätzliches Element, beispielsweise ein Div oder ein Br, hinzuzufügen und dessen Stil als „clear: both“ zu definieren.
4.14. Horizontale Zentrierung
Das ist ein einfacher Tipp, aber es lohnt sich, ihn zu wiederholen, weil ich so viele Fragen von Anfängern sehe: „Wie zentriere ich etwas horizontal mit CSS?“ Sie müssen die Breite des Elements und den horizontalen Rand definieren, wenn Ihr Layout in einer Ebene (einem Container) enthalten ist, wie folgt:

Sie können die horizontale Zentrierung folgendermaßen definieren:
#wickeln {
width:760px; /*Ändern Sie die Breite Ihrer Ebene*/
Rand: 0 automatisch;
}
Allerdings kann IE5/Win diese Definition nicht korrekt anzeigen. Wir verwenden einen sehr nützlichen Trick, um dieses Problem zu lösen: Verwenden Sie das Attribut text-align. So was:
Körper {
Textausrichtung: zentriert;
}
#wickeln {
width:760px; /*Ändern Sie die Breite Ihrer Ebene*/
Rand: 0 automatisch;
Textausrichtung: links;
}
Die erste Regel „text-align:center“ für den Textkörper legt fest, dass alle Elemente des Textkörpers in IE5/Win zentriert werden (andere Browser zentrieren nur den Text), und die zweite Regel „text-align:left“ richtet den Text in #warp linksbündig aus.
4.15. CSS importieren und ausblenden
Da ältere Browser CSS nicht unterstützen, besteht ein gängiger Ansatz darin, die @import-Technik zu verwenden, um CSS auszublenden. Zum Beispiel:
@import url(main.css);
Allerdings funktioniert diese Methode nicht für IE4, was mir eine Zeit lang Kopfschmerzen bereitete. Später habe ich es so geschrieben:
@importieren Sie main.css;
4.16. Optimierung für IE Manchmal müssen Sie spezielle Regeln für IE-Browser-Bugs definieren. Hier gibt es zu viele CSS-Tricks (Hacks). Ich verwende nur zwei davon. Unabhängig davon, ob Microsoft CSS in der kommenden IE7-Betaversion besser unterstützt, sind diese beiden Methoden die sichersten.
1. Annotationsmethoden
(a) Um eine CSS-Definition im IE auszublenden, können Sie einen untergeordneten Selektor verwenden:
html>Textkörper p {
/*Inhalt definieren*/
}
(b) Die folgende Syntax wird nur vom Internet Explorer verstanden (sie ist vor anderen Browsern verborgen)
* html p {
/* Deklarationen */
}
(c) Manchmal möchten Sie, dass IE/Win effektiv ist, IE/Mac jedoch ausgeblendet bleibt. Sie können den Backslash-Trick verwenden:
/* */
* html p {
Erklärungen
}
/* */
2. Bedingte Kommentare Eine andere Methode, die meiner Meinung nach bewährter ist als CSS-Hacks, ist die Verwendung der bedingten Kommentare mit privaten Attributen von Microsoft. Mit dieser Methode können Sie einige Stile für den IE separat definieren, ohne die Definition des Haupt-Stylesheets zu beeinträchtigen. So was:


4.17. Tipps zur Fehlerbehebung: Wie groß sind die Ebenen?
Beim Debuggen von CSS-Fehlern müssen Sie den CSS-Code wie ein Schriftsetzer Zeile für Zeile analysieren. Normalerweise definiere ich eine Hintergrundfarbe auf der problematischen Ebene, damit klar ist, wie viel Platz die Ebene einnimmt. Manche Leute schlagen die Verwendung eines Rahmens vor, was grundsätzlich akzeptabel ist. Das Problem besteht jedoch darin, dass der Rahmen manchmal die Größe des Elements vergrößert und der obere und untere Rand den Wert des vertikalen Rands zerstört. Daher ist die Verwendung eines Hintergrunds sicherer.
Eine weitere Eigenschaft, die häufig Probleme verursacht, ist der Umriss. Ein Umriss sieht wie ein Rahmen aus, hat aber keinen Einfluss auf die Größe oder Position eines Elements. Nur wenige Browser unterstützen die Outline-Eigenschaft, die einzigen, die ich kenne, sind Safari, OmniWeb und Opera.
4.18.Schreibstil für CSS-Code Beim Schreiben von CSS-Code hat jeder seine eigenen Schreibgewohnheiten hinsichtlich Einrückungen, Zeilenumbrüchen und Leerzeichen. Nach kontinuierlicher Übung habe ich beschlossen, den folgenden Schreibstil zu übernehmen:
Selektor1,
Selektor2 {
Eigenschaft:Wert;
}
Bei der Verwendung gemeinsamer Definitionen platziere ich normalerweise jeden Selektor in einer eigenen Zeile, damit sie in der CSS-Datei leichter zu finden sind. Setzen Sie zwischen dem letzten Selektor und der geschweiften Klammer { ein Leerzeichen und schreiben Sie jede Definition in eine separate Zeile. Das Semikolon steht ohne Leerzeichen direkt hinter dem Eigenschaftswert.
Normalerweise setze ich nach jedem Attributwert ein Semikolon. Obwohl die Regeln es erlauben, nach dem letzten Attributwert kein Semikolon zu setzen, kann es leicht passieren, dass man beim Hinzufügen eines neuen Stils vergisst, ein Semikolon hinzuzufügen, was zu Fehlern führen kann. Daher ist es besser, alle hinzuzufügen.
Setzen Sie abschließend die schließende geschweifte Klammer } in eine eigene Zeile.
Leerzeichen und Zeilenumbrüche erleichtern die Lesbarkeit.
Lesetipp:
https://www.jb51.net/article/15758.htm
http://portal.oss.org.tw/files/95/a/a6.pdf
http://en.wikipedia.org/wiki/XHTML
http://www.w3.org/TR/2000/REC-xhtml1-20000126/
http://www.dreamdu.com/xhtml/function_xhtml11/

Zusammenfassung der CSS-Browserkompatibilitätsprobleme

Zusammenfassung der CSS-Browserkompatibilität
Die Kompatibilität von CSS mit Browsern bereitet manchmal Kopfschmerzen. Wenn Sie die entsprechenden Techniken und Prinzipien verstehen, ist dies vielleicht keine schwierige Aufgabe. Wir haben die Kompatibilitätsverarbeitungsmethoden für IE7, 6 und Fireofx aus dem Internet gesammelt und organisiert. Versuchen Sie für den Übergang zu Web 2.0, Code im XHTML-Format zu schreiben. DOCTYPE beeinflusst die CSS-Verarbeitung. Als W3C-Standard muss eine DOCTYPE-Deklaration hinzugefügt werden. Im Folgenden sind die Probleme aufgeführt, die wir bei unserer Arbeit häufig verwenden oder an denen wir stoßen.
CSS-Tipps
5.1.Div vertikales Zentrierungsproblem
vertical-align:middle; Erhöhen Sie den Zeilenabstand auf die gleiche Höhe wie das gesamte DIV. line-height:200px; Fügen Sie dann den Text ein und er wird vertikal zentriert. Der Nachteil besteht darin, dass Sie den Inhalt so steuern müssen, dass er nicht umbricht.
5.2. Das Problem der Randverdoppelung: Der Rand eines als Float festgelegten Div wird im Internet Explorer verdoppelt. Dies ist ein Fehler, der im IE6 auftritt. Die Lösung besteht darin, diesem Div display:inline; hinzuzufügen.
Beispiel: <#div id="imfloat"> Das entsprechende CSS ist #IamFloat{ float:left; margin:5px;/*IE versteht es als 10px*/ display:inline;/*IE versteht es als 5px*/}
5.3. Doppelte Distanz durch schwebendes IE
#box{ float:left; width:100px; margin:0 0 0 100px; //In diesem Fall generiert der IE einen Abstand von 200px display:inline; //Float ignorieren} Hier gehen wir näher auf die beiden Elemente Block und Inline ein: Blockelemente zeichnen sich dadurch aus, dass sie immer in einer neuen Zeile beginnen und Höhe, Breite, Zeilenhöhe und Rand gesteuert werden können (Blockelement); Inline-Elemente zeichnen sich dadurch aus, dass sie sich in derselben Zeile wie andere Elemente befinden und nicht gesteuert werden können (eingebettetes Element); #box{ display:block; //Kann Blockelemente für Inline-Elemente simulieren display:inline; //Erzielt den Effekt der Anordnung in derselben Zeile diplay:table;
5.4. Probleme mit IE und Breite und Höhe
Der Internet Explorer erkennt die Min-Definition nicht, behandelt normale Breite und Höhe jedoch so, als hätten sie Mindestwerte. Dies ist ein großes Problem. Wenn Sie nur Breite und Höhe verwenden, ändern sich diese beiden Werte in einem normalen Browser nicht. Wenn Sie nur Mindestbreite und Mindesthöhe verwenden, entspricht dies dem Nichteinstellen von Breite und Höhe im IE. Wenn Sie beispielsweise ein Hintergrundbild festlegen möchten, ist diese Breite wichtiger. Um dieses Problem zu lösen, können Sie Folgendes tun: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5.5. Minimale Seitenbreite
min-width ist ein sehr praktischer CSS-Befehl, mit dem festgelegt werden kann, dass ein Element eine bestimmte Breite nicht unterschreiten darf. Auf diese Weise wird sichergestellt, dass das Layout immer korrekt ist. Der Internet Explorer erkennt dies jedoch nicht und verwendet tatsächlich die Breite als Mindestbreite. Damit dieser Befehl im Internet Explorer funktioniert, können Sie ein <div> unter den <body>-Tag setzen, dem Div eine Klasse zuweisen und das CSS dann folgendermaßen gestalten: #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} Die erste Mindestbreite ist normal; die Breite der zweiten Zeile verwendet jedoch Javascript, das nur vom Internet Explorer erkannt wird, wodurch Ihr HTML-Dokument weniger formell wird. Es implementiert tatsächlich die Mindestbreite durch eine Javascript-Beurteilung.
5.6. DIV-Floating-IE-Text erzeugt 3-Pixel-Bug
Das linke Objekt schwebt, und die rechte Seite wird mithilfe des linken Rands des äußeren Patches positioniert. Der Text im rechten Objekt hat einen Abstand von 3 Pixeln von links. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //Dieser Satz ist der Schlüssel} <div id="box"> <div id="left"></div> <div id="right"></div> </div>
5.7.IE-Versteckspielproblem: Wenn die Div-Anwendung komplex ist und in jeder Spalte einige Links vorhanden sind, ist DIV anfällig für Versteckspielprobleme. Einige Inhalte können nicht angezeigt werden. Wenn Sie diesen Bereich mit der Maus auswählen, werden Sie feststellen, dass der Inhalt tatsächlich auf der Seite vorhanden ist. Lösung: Verwenden Sie die Zeilenhöheneigenschaft für #layout oder verwenden Sie eine feste Höhe und Breite für #layout. Halten Sie die Seitenstruktur so einfach wie möglich.
5.8. Float-Div schließen; Float löschen; Höhe anpassen;
① Zum Beispiel: <#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >Hier möchte NOTfloatC sich nicht weiter horizontal bewegen, sondern nach unten. (Die Eigenschaften von floatA und floatB wurden auf float:left; gesetzt) Dieser Code funktioniert im IE einwandfrei, aber das Problem liegt in FF. Der Grund ist, dass NOTfloatC kein Float-Tag ist und das Float-Tag geschlossen werden muss. Fügen Sie zwischen <#div class="floatB"> und <#div class="NOTfloatC"> <#div class="clear"> hinzu. Achten Sie unbedingt auf die Position dieses Divs. Es muss sich auf derselben Ebene wie die beiden Divs mit Float-Attributen befinden. Zwischen ihnen darf keine verschachtelte Beziehung bestehen, da sonst eine Ausnahme auftritt. Und definieren Sie den Clear-Stil wie folgt: .clear{ clear:both;}
② Legen Sie für das Div, das als externer Wrapper dient, keine feste Höhe fest. Um eine automatische Anpassung der Höhe zu ermöglichen, fügen Sie im Wrapper overflow:hidden hinzu. Wenn die Box Float enthält, ist die automatische Höhenanpassung im IE ungültig. Zu diesem Zeitpunkt sollten die privaten Layouteigenschaften des IE ausgelöst werden (verdammter IE!). Dies kann durch die Verwendung von zoom:1; erreicht werden, wodurch Kompatibilität erreicht wird. Ein Wrapper wird beispielsweise wie folgt definiert: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
5.9. Nichtanpassbarkeit der Höhe Nichtanpassbarkeit der Höhe bedeutet, dass die Höhe der äußeren Schicht nicht automatisch angepasst werden kann, wenn sich die Höhe des inneren Objekts ändert, insbesondere wenn das innere Objekt Ränder oder Füllflächen verwendet. Beispiel: #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>Inhalt im p-Objekt</p> </div> Lösung: Fügen Sie über und unter dem P-Objekt zwei leere Div-Objekte ein. CSS-Code: .1{height:0px;overflow:hidden;} oder fügen Sie dem DIV Rahmenattribute hinzu.
5.10. Warum gibt es in IE6 eine Lücke unter dem Bild? Es gibt viele Möglichkeiten, diesen Fehler zu beheben, z. B. durch Ändern des HTML-Layouts, Festlegen von img auf display:block oder Festlegen der Eigenschaft „vertical-align“ auf „vertical-align:top | bottom | middle | text-bottom“.
5.11. So richten Sie Text mit vertical-align:middle am Texteingabefeld aus; <style type="text/css">  </style>
5.12. Gibt es einen Unterschied zwischen der in Webstandards definierten ID und Klasse?
Der Webstandard lässt keine doppelten IDs zu. Beispielsweise kann „div id="aa"“ nicht zweimal wiederholt werden. „class“ definiert jedoch eine Klasse, die theoretisch unendlich oft wiederholt werden kann, sodass sie von Definitionen verwendet werden kann, auf die mehrfach verwiesen werden muss.
Die Priorität von Attributen: ID hat eine höhere Priorität als die Klasse 3.
5.13
5.14. Warum kann die Lösung die Lösung nicht in der Lösung setzen, um die Lösung in der Lösung zu wechseln. Content-Typ "content =" text/html; :#000;
5.15. Warum kann ich einen Behälter mit einer Höhe von ca. 1PX nicht definieren?
Dieses Problem in IE6 wird durch die Standardleitungshöhe verursacht
5.16. Wie kann ich die Ebene auf dem Flash erscheint?
5.17.
<style type="text/css">
<! -
div
{
Position: absolut;
oben: 50 %;
LEF: 50%;
Rand: -100px 0 0 -100px;
Breite: 200px;
Höhe: 200px;
Rand: 1px durchgehend rot;
}
-->
</Stil>
5.18.

5.18.
Die Standard -Schriftgröße in IE6 liegt ungefähr zwischen 12 und 14px. Selbst wenn Sie die Höhe verwenden: 4px; Hinzufügen von Überlauf: Hidden löst das Problem.
<div style = "Höhe: 4px; Überlauf: versteckt;"> </div>

Ff und dh
1. Diving-Problem Wenn der Rand und die Rand-Rechte auf automatisch eingestellt sind, ist Div bereits zentriert.
2. Rand und Hintergrund von Link (ein Tag) Um einem Link eine Rand- und Hintergrundfarbe hinzuzufügen, müssen Sie Anzeige: Block und Float: Links festlegen, um sicherzustellen, dass es nicht einpackt. Wenn Sie sich auf Menubar beziehen, kann die Höhe für A und Menubar vermieden werden, dass die untere Kantenanzeige falsch ausgerichtet wird.
3. Der Hover-Stil erscheint nicht, nachdem der Hyperlink besucht wird. /style>
4.
5. UL -Polsterung und Marge Das UL -Tag hat standardmäßig in FF einen Padding -Wert
6. Form -Tag Dieses Tag fügt automatisch einen gewissen Rand in IE hinzu, aber in FF ist der Rand 0. Wenn Sie es konsequent anzeigen möchten, ist es am besten, den Rand und die Polsterung in CSS anzugeben.
7. Inkonsistente Interpretation des Kastenmodells Die inkonsistente Interpretation des Boxmodells in FF und IE führt zu einer Differenz von 2px. In IE wird es tatsächlich so interpretiert: Wenn Div {Maring: 30px; Margin: 28px} wiederholt definiert wird, wird der letzte ausgeführt, also kann man nicht einfach Rand schreiben: xx px! Wichtig; F Width: 600px;
8. Attributauswahl (dies ist nicht kompatibel, es ist ein Fehler von verstecktem CSS) P [ID] {} Div [ID] {} Dies ist für IE6.0 und unten versteckt, aber es funktioniert für FF und Oper. Gleiches Format.
9. Die rücksichtslose Methode -! up/tab1.gif) No-Repeat 1px 0px;
10. Das Standardwert von IE und FF. Schreiben Sie CSS, das mit FF und IE kompatibel ist. Wir alle wissen, dass ein Browser eine Webseite ansagt, wie sie auf dem CSS-Stylesheck der Webseite angezeigt werden. Der Hintergrund von Div oder anderen Elementen, wenn sie nicht in CSS angegeben sind, setzt der Browser es auf weiß oder transparent, und das gleiche gilt für andere undefinierte Stile. Der grundlegende Grund, warum viele Dinge in FF unterschiedlich erscheinen, ist, dass ihre Standardanzeigen unterschiedlich sind.
11. Warum kann der Text nicht die Höhe des Containers in FF erweitern? Die Lösung besteht darin, die Höheneinstellung zu entfernen und MIN-HEITE zu setzen: 200px;
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers ::::::::::: Wenn Sie die XML am oberen Rand des Containers entfernen, finden Sie hier das Problem.
13. Machen Sie IE6 transparente PNG -Bilder.
Sie müssen einen CSS -Filter verwenden
*html #Bildstil {
Hintergrundbild: Keine;
Filter: Progid: DimaMagetransform.Microsoft.Alphaimageloader (Src = "Fil
Ename.png ", simenMethod =" scale ");
}
14. Wenn Sie dem Inhalt im A -Tag Stil hinzufügen müssen, müssen Sie die Anzeige festlegen: (häufig in Navigations -Tags verwendet).
15. Die Standard -Schriftgröße in IE6 liegt ungefähr zwischen 12 und 14px
Die Standard -Schriftgröße in IE6 liegt ungefähr zwischen 12 und 14px. Selbst wenn Sie die Höhe verwenden: 4px; Hinzufügen von Überlauf: Hidden löst das Problem.
<div style = "Höhe: 4px; Überlauf: versteckt;"> </div>

IE6, IE7, FF IE7.0 sind nicht mehr und es gibt neue Probleme mit der CSS -Unterstützung. Mit mehr Browsern wird die Kompatibilität der Webseiten verschlechtert, und wir sind diejenigen, die das Kompatibilitätsproblem von IE7.0 lösen. Im Folgenden finden Sie eine Kompatibilitätserfassung der drei Browser.
Die erste ist die CSS -Hack -Methode
Höhe: 20px; /*für Firefox* /
*Höhe: 25px; /*für IE7 & IE6* /
_Height: 20px; /*für IE6* / beachten Sie die Reihenfolge.
Dies ist auch ein CSS -Hack.
#example {color: #333;
* html #example {color: #666;
*+html #example {color: #999;
Typ 2:
<!-Andere Browser->
<link rel="stylesheet" type="text/css" href="css.css" />
<!-[wenn dh 7]> <!-geeignet für IE7->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!-[wenn lte dh 6]> <!-geeignet für IE6 und unten->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Die dritte Methode ist CSS -Filter. .
Erstellen Sie wie folgt einen neuen CSS -Stil:
#Item {Breite: 200px; CSS -Stil mit! Wichtig. Ob dieses Element existiert. Für die Kompatibilität mit IE6 und FF können Sie den vorherigen!
Empfohlenes Schreiben:
#example {color: #333;
* html #example {color: #666;
*+html #example {color: #999;
Es fühlt sich leicht an, sich zu erinnern.

Empfohlene Lektüre
http://www.cnblogs.com/me-sa/archive/2007/12/03/980685.html#981249
http://693272.blog.163.com/blog/static/364859842008514102556309/
JavaScript -Browser -Kompatibilitätszusammenfassung

Im Folgenden finden Sie einige Informationen zur JavaScript -Kompatibilität in verschiedenen Browsern.
1. Einige Referenzen
http://nexgenmedia.net/evang/iemozguide/
http://www.javascriptkit.com/domref/
Firefox -Erweiterung für CSS
http://developer.mozilla.org/en/docs/css_reference:mozilla_extensions
Informationen zu CSS3 können die Unterstützung des aktuellen Browsers für CSS3 online testen
http://www.css3.info
2. Das empfohlene JS-Debugging-Tool ist das Firebug-Plug-In für Firefox, mit dem Breakpoints für die Ausführung von JS festgelegt, CSS-Stile während der Laufzeit geändert werden können, DOM-Modelle anzeigen usw.
3. Öffnen Sie alle JS -Warnungen in Firefox:
Geben Sie die Adressleiste ein: etwa: Konfiguration
Doppelklicken Sie und setzen Sie die JavaScript-Option restlich auf True.
4. Dinge zu beachten, wenn JavaScript △ document.all ("id") -> document.getElementById ("ID") verwendet wird.
Und versuchen Sie, die ID anstelle des Namens zu verwenden, um die Kontrolle zu identifizieren:
Wenn die Kontrolle nur einen Namen hat, aber keine ID, verwenden Sie GetElementById:
IE: Sie können auch Objekte finden
FF: Gibt NULL zurück
△ Wie man ein Element in der Form bekommt
Elform.elemente ['Name'];
△ Bei der Annahme von Sammelelementen unterstützt der IE zwei Schreibweisen: [] und (), aber FF unterstützt nur [], wie z. B.:
Tabelle.Rows (5) .Cells (0)
Wechsel zu:
Tabelle.Rows [5] .Cells [0]
△ Die Methode, um festzustellen, ob ein Objekt ein Objekt ist
if (Typeof -Objektvariable == "Objekt")
Anstelle von if (Objektvariable == "[Objekt]"))
△ Eval (Objektname) -> document.getElementById
FF unterstützt die Eval -Funktion △ Rufen Sie das Objekt direkt über ID -Objekt -ID.Value = "" auf. "
Wechseln zu
document.getElementById ("Name"). value = "" "
△ obj.insertadjacentelement ("vorabgin", objtext);
Verwenden
obj.parentnode.insertbefore (objtext, obj);

△ FFs CreateLement unterstützt den HTML -Code nicht mit Dokument.Write (ESHTML).
Oder setzen Sie die Attribute nach dem Erstellen des Elements.
var obj = createLement ("Eingabe");
Obj.Type = "Kontrollkästchen";
var obj2 = document.getElementById ("id2");
obj2.Parentnode.insertbefore (obj, obj2);
Wenn Sie den HTML -Code direkt einfügen, können Sie in Betracht ziehen, verwenden
CreateContextualfragment

△ InnerText -> TextContent
△ Der $ im Objektnamen wird nicht erkannt. Es wird empfohlen, es in _ zu ändern
objname = "t1 $ spin"
Wechseln zu
objname = "t1_spin"
△ In FF habe ich ein Attribut auf ein Objekt festgelegt und es dann abgerufen.
objtext.setattribute ("obj", obj);
ALERT (OBJ.ID) // Richtiger Name
obj = objText.getAttribute ("obj");
Alert (obj.id) // null
Es gibt kein Problem in IE.
Wenn der zweite Parameter ein Objekt ist, ist es gleichwertig, die Methode für toString () aufzurufen.
objText.dropdown_select = obj;
obj = objtext.dropdown_select

△ Klassenname -> Klasse
Verwenden Sie die Klasse in FF anstelle von Klassenname in IE
Da die Klasse ein Schlüsselwort ist, müssen Sie SetAtTribute/GetAttribute verwenden
setAttribute ("Klasse", "CSS -Stilname");
△ Die in HTML definierten Attribute müssen mit GetArttribute verwendet werden
<td id = "td1" isObj = "true">
Wenn:
document.getElementById ("TD1"). ISOBJ gibt immer undefiniert zurück, aber es funktioniert in IE.
document.getElementById ("td1"). getAtTribute ("isobj")

△ Die Auswahlsteuerung in FF wird nicht immer mehr oben angezeigt
Der Weg zur Abdeckung des SELECT -Steuerelements in IE besteht darin, IFame zu verwenden
△ für if (vars == undefiniert) Die folgenden Werte werden verwendet, um festzustellen, ob sie gleichwertig sind
undefiniert
Null
FALSCH
0

△ Wenn FF obj.focus () aufruft;
window.settimeout (function () {obj.focus ();}, 20);

△ KeyCode ist schreibgeschützt.
Die Problemumgehung ist:
1. Geben Sie Sprung ein -> Schreiben Sie Ihren eigenen Sprungverarbeitungscode.
Überqueren Sie alle Elemente im DOM, finden Sie das nächste Element, das den Fokus des aktuellen Elements festlegen kann, und den Fokus darauf legen
2. In den Kontrollen, die eingegeben werden können,
Ersetzen Sie den ausgewählten Teil durch den neu eingegebenen Inhalt: var text = string.fromCharCode (Ereignis.KeyCode);
Um zu verhindern, dass wichtige Ereignisse hochgeladen werden, rufen Sie an: event.preventDefault ()

△ <taste> wird von Firefox als Senden des Formulars oder zum Auffrischen der Seite interpretiert ???
MÜSSEN STANDARD <Button type = "Button"> schreiben
Oder in Onclick = "Originalfunktion Call (); false zurückgeben;"

△ In Firefox kann Dokument.
Warum funktioniert document.Keydown?
△ Kinder -> Kindernoten
△ style.pixelHeight -> style.height
△ Bestimmen Sie, ob eine Funktion oder eine Variable existiert
if (! ("varname" im Fenster)) var varname = 1;

document.body.clientwidth
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en">
Wenn die HTML die obige Anweisung enthält, sollte sie unter Verwendung der folgenden Methode erhalten werden
document.documentElement.clientwidth
△ Fenster.CreatePopup
FF unterstützt document.body.onResize nicht
FF unterstützt nicht mit window.onResize
Beachten Sie, dass das OnResize -Ereignis nicht ausgelöst wird, wenn die Seite geöffnet wird?
Die Standardeinstellung in IE ist Inhaltsbox.
div, td {-moz-Box-Größe: Border-Box; Box-Größen: Border-Box; Rand: 0; Polsterung: 0;}
Es kann auch zum Dokumentkopf hinzugefügt werden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Aber es hat einen größeren Einfluss auf den IE Old Code △ Registrierungsereignis
Dh: attackEvent
FF: AddEventListener ("Blur", Myblur, False);
Der erste Parameter -Ereignisname muss nicht "on" enthalten
Der dritte Parameter False bedeutet, dass das Ereignis vom Ereignisobjekt entlang des DOM -Baumes an den Körper übergeben wird.

Ereignis auslösen
Dh: obj.fireevent ("onclick");
Ff:
var e = document.createEvent ("Ereignisse");
E.Initevent ("Click", True, False);
Element.DispatchEvent (Ereignis)
△ Holen Sie sich das Objektgriff in der Ereignisverarbeitungsfunktion
var othis = this;
obj.onfocus = function (evt) {
othis.doonfocus (EVT);
}
△ Einheitlicher Ereignisverarbeitungsrahmencode
doonfocus (evt) {
evt = evt || Fenster.Event;
var el = evt.target || evt.srcelement;
// nachfolgende Verarbeitung
}

△ FF unterstützt das On -Propertychange -Ereignis nicht, aber Sie können die Settermethode der Eigenschaft in FF wie folgt definieren:
Htmlelement.prototype .__ DefinesSerTter __ ("readonly", function (readonly) {
// ein virtuelles Ereignisobjekt konstruieren
var evt = [];
evt ["Ziel"] = dies;
evt ["PropertyName"] = 'Readonly'
// Die Funktion "Onpropertychange" muss den EVT -Parameter definieren, siehe Code für einheitliche Ereignisverarbeitungsframework
if (this.onpropertychange) this.onpropertychange (EVT);
});

5.IE -> Firefox CSS -Klasse △ Cursor: Hand -> Cursor: Zeiger
△ Expression Firefox unterstützt es nicht.
Um bessere Ergebnisse zu erzielen, sollten Sie Ihren eigenen Ausdruck in die JavaScript -Verarbeitungsfunktion erstellen, damit sie sowohl im IE als auch im FF verwendet werden können.
△ Filter Firefox unterstützt nicht
Filter: Alpha (Opazität = 50);
Ersetzen durch
-moz-Deckkraft: 0,5;
△ Text-Overflow
Unterstützt nicht transparent
In Firefox, obj.setattribute ("bgcolor", "#fffffff") unterstützt nur Farbe
input [type = text] {
Höhe: 20px;
}
Beachten Sie, dass es keinen Platz zwischen Input und [!
△ Schriftart funktioniert nicht am Körper und TD in IE, aber FF kann eine Schriftfamilie gleichmäßig verwenden
6. dreiundzwanzig Unterschiede zwischen CSS und JavaScript in IE und Firefox
http://hi.baidu.com/xg21/blog/item/fbc87c3d624881e93c6d977e.html

7. Missverständnisse und Unterschiede zwischen JavaScript und CSS in IE und Firefox
http://hi.baidu.com/leiting084/blog/item/60dcac6e1decf4dd81cb4a5d.html

8. Text schreiben
FunktionskompatibleIntext (ID, Text)
{
wenn (navigator.appName.indexOf("Explorer") > -1) {
document.GetElementById (ID) .InNerText = text;
}
anders
{
document.getElementById (id) .TextContent = text;
}
}
Die Auswirkungen von XHTML Standard Div+CSS -Layout auf die Website SEO
Die Auswirkungen von XML Standard Div+CSS -Layout auf die Website SEO
7.1 CODE -Vereinfachung Verwenden Sie das Div+CSS -Layout, um den Seitencode zu vereinfachen. Es gibt zwei direkte Vorteile, die durch die Vereinfachung der Code eingebracht werden: Eine ist die Verbesserung der Effizienz des Spinnenkrabbends, sodass die gesamte Seite in kürzester Zeit gechtet werden kann, was für die Qualität der Sammlung von Vorteil ist.
7.2 verschachtelte Tabelle gibt in ihren Artikeln aus, dass Suchmaschinen im Allgemeinen keine tiefen Spinnen mit Tischlayouts kriechen und auf mehrere Ebenen verschachtelter Tabellen stoßen oder die gesamte Seite direkt aufgeben.
Bei Verwendung von Tabellenlayout müssen Sie, um einen bestimmten visuellen Effekt zu erzielen, mehrere Tabellen anwenden. Wenn die verschachtelte Tabelle den Kerninhalt enthält, überspringt die Spinne diesen Abschnitt und erfasst den Kern der Seite beim Kriechen nicht und die Seite wird zu einer ähnlichen Seite. Zu viele ähnliche Seiten auf einer Website beeinflussen Ranglisten und Domain Trust.
Das Div+CSS -Layout hat im Grunde kein solches Problem.

7.3 Geschwindigkeitsprobleme Div+CSS -Layout reduziert den Seitencode im Vergleich zum Tabellenlayout und verbessert die Ladegeschwindigkeit erheblich, was beim Krabbeln von Spinnen sehr vorteilhaft ist. Zu viel Seitencode kann zu einer Auszeit des Kriechens führen, und die Spinne wird der Meinung, dass die Seite nicht zugänglich ist und die Aufnahme und Gewichtung beeinflusst.
Auf der anderen Seite verfolgt ein echter Seoer nicht nur Inklusion und Ranking.
7.4 Einfluss auf die Rangliste Das Div+CSS -Layout basierend auf dem XTML -Standard wird normalerweise so weit wie möglich nach Abschluss des Entwurfs perfektioniert, damit die W3C -Überprüfung bestehen kann. Bisher hat keine Suchmaschine festgestellt, dass ihre Ranking -Regeln Websites oder Seiten bevorzugen, die den W3C -Standards entsprechen, aber es wurde nachgewiesen, dass Websites, die die XTML -Architektur verwenden, im Allgemeinen gut rangieren. Dies mag umstritten sein, aber Le Sishu selbst hat diese Ansicht.
Ich denke, diese Situation ist möglicherweise keine Rangliste.
Schließlich ist etwas besser als nichts.
Ich habe lange gearbeitet. Danke!

<<: Detaillierter Code zum Hinzufügen von Electron zum Vue-Projekt

>>: Datensatz zu langsamen MySQL-Abfragen und Abfragerekonstruktionsmethoden

Einfache Analyse von EffectList in React

Zusammenfassung der CSS- und XTHML-Schreibstandards und häufigen Probleme (Seitenoptimierung)

Einfache Analyse von EffectList in React

Lösung für Djangos Unfähigkeit, mit dem uwsgi+nginx-Proxy auf statische Ressourcen zuzugreifen

Zusammenfassung der Probleme bei der Installation und Verwendung des MySQL 5.7.19 Winx64 ZIP-Archivs

Natives js imitiert die Pulldown-Aktualisierung eines Mobiltelefons

Einführung in den B-Tree-Einfügeprozess

Führen Sie die folgenden Schritte aus, um die Anmeldung durch Gesichtserkennung in Ubuntu zu implementieren

So berechnen Sie mit Linux den von zeitgesteuerten Dateien belegten Speicherplatz

Erweiterte Closures in JavaScript erklärt

Lösung für das Problem, dass der MySQL-Dienst unter Windows nicht gestoppt oder gelöscht werden kann

Linux Samba-Server – sehr detaillierte Installation und Konfiguration (mit Problemlösung)

Artikel empfehlen

Eine kurze Diskussion über zwei Strombegrenzungsmethoden in Nginx

Datenbank löschen und weglaufen? So sichern Sie die MySQL-Datenbank mit xtraback

So verwenden Sie den Vue-Video-Player für eine Live-Übertragung

Gängige Master-Slave-Replikationsarchitekturen in MySQL 4

Beispielcode zur Implementierung einer dynamischen leuchtenden Spezialeffektanimation von Kreisen mit reinem CSS3

Detaillierte Erläuterung der zugrunde liegenden Implementierung des absteigenden Index, einer neuen Funktion von MySQL 8

Erstellen Sie mit PS in zwei Minuten eine Homepage für eine XHTML+CSS-Website

Die häufigsten Fehler beim Schreiben von HTML-Tags

MySQL 8.0.18 Installations-Tutorial unter Windows (Abbildung)

Einführung in RHCE-Bridging, passwortfreie Anmeldung und Portnummernänderung

Eine kurze Erläuterung zum Abbrechen von Anfragen und zum Verhindern doppelter Anfragen in Axios

Rundungsvorgang des Datums-/Uhrzeitfelds in MySQL

Eine kurze Analyse der parallelen MySQL-Replikation

So implementieren Sie die Komprimierung von Webseiten im Nginx-Optimierungsdienst

Tutorial zur kostenlosen Konfiguration der MySQL 8.0.13-Installationsversion in einer Windows-Umgebung