Häufige Browserkompatibilitätsprobleme in HTML und CSS-CSS-Tutorial-php.cn

Wir werden auf jeden Fall CSS in der HTML-Entwicklung verwenden, aber manchmal verläuft die Entwicklung nicht so reibungslos, wie wir dachten. Beispielsweise treten häufige Browserkompatibilitätsprobleme in HTML und CSS auf. In diesem Abschnitt zeigen wir Ihnen, wie um das Problem zu lösen.

1. Zentrierungsproblem

Der Inhalt im Div wird standardmäßig von IE zentriert und von FF standardmäßig linksbündig ausgerichtet. Sie können versuchen, Code hinzuzufügen:

margin: 0 auto;

Nach dem Login kopieren

2. Höhenproblem

Bei zwei übereinander angeordneten oder verschachtelten Divs wird die Höhe des darüber liegenden Divs festgelegt. Wenn der tatsächliche Inhalt im Div größer als die eingestellte Höhe ist, wird die In FF überlappen sich zwei Divs. Im IE macht das untere Div jedoch automatisch Platz für das obere Div. Um also überlappende Ebenen zu vermeiden, muss die Höhe entsprechend gesteuert werden, oder Sie können die Höhe einfach nicht schreiben Eine bessere Methode ist height: 100 %. Wenn die Elemente der ersten Ebene in diesem Div jedoch alle Float sind, müssen Sie am Ende des Div-Blocks und vor dem Abschluss ein versunkenes leeres Div hinzufügen :

float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

Nach dem Login kopieren

3. klar:both;

Wenn Sie nicht von Float betroffen sein möchten, schreiben Sie einfach klar:both;

4. Doppelter Abstand, der durch den IE-Floating-Marge erzeugt wird

01#box {
 float:left;
width:100px;
 margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

Nach dem Login kopieren

5. Auffüllproblem

Nachdem FF die Auffüllung eingestellt hat, erhöht sich die Höhe und Breite des Div IE wird nicht (* Standard XHTML1.0 definiert dtd Es scheint konsistent zu sein) Die Höhensteuerung ist angemessen, oder versuchen Sie, die Breite zu reduzieren und Polsterung zu verwenden. Dies ist jedoch im Allgemeinen nicht der Fall Es gibt einen großen Unterschied zwischen der Auffüllung von FF und IE. Die tatsächliche Breite des Div = Breite + Auffüllung, daher wird die volle Breite und Auffüllung des Divs durch die tatsächlich gewünschte Breite minus Auffüllung definiert.

6. Probleme mit dem Abstand und Rand auf der Y-Achse, wenn Divs verschachtelt sind

Der Abstand vom untergeordneten Div zum übergeordneten Div auf der y-Achse in FF ist übergeordneter Abstand + untergeordneter Rand

Im IE ist der Abstand vom untergeordneten Teil zum übergeordneten Teil auf der Y-Achse der größere Wert aus Elternabstand und untergeordnetem Rand.

In FF, wenn der Elternabstand = 0 und der Rand = 0 auf der y-Achse ist, ist der Abstand des untergeordneten Div zum übergeordneten Div 0 und der untergeordnete Rand wirkt außerhalb des übergeordneten Div

7. Törichte Lösungskompetenzen für Polsterung, Rand, Höhe, Breite

Beachten Sie, dass dies eine Fähigkeit und keine Methode ist:

Schreiben Sie die Standardkopfzeile

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=” 
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding

Nach dem Login kopieren

8. Listenklasse

1. Das ul-Tag hat standardmäßig einen Auffüllwert in FF. Im IE hat nur margin einen Wert

Definieren Sie zuerst ul {margin:0;padding:. 0;}

2. Beseitigen Sie das Einrückungsproblem von ul- und ol-Listen. Bei der Eingabe sollte der Stil wie folgt geschrieben werden: {list-style:none;margin:0px;padding:0px;}

9. Display-Klasse (display:block, inline)

1. Display:block, inline zwei Elemente

display:block; //Kann inline simulieren Elemente als Blockelemente

display:inline; //Erzielen Sie die gleiche Zeilenanordnung. Der Effekt von

display:table //simuliert für FF den Effekt von table

display:block-Blockelement, die Eigenschaften des Elements sind:

immer in einer neuen Zeile. Starthöhe, Zeilenhöhe und oberer und unterer Rand sind alle steuerbar; die Standardeinstellung ist 100 % des Containers eine Breite wird festgelegt