Über zentriertes Layout und IE-Doppelrand-Bug_CSS/HTML

Heute habe ich das Problem des CSS-zentrierten Layouts gegoogelt, und die Ergebnisse zitierten fast alle denselben Artikel. Um im IE zu zentrieren, definieren Sie einfach das text-align:center;-Attribut im

In Firefox muss ein Wrapper definiert werden. Geben Sie dann die Eigenschaften margin-left:auto;margin-right:auto; an, um den Block in Firefox zu zentrieren. Tatsächlich verwende ich selbst das Margin-Attribut, die Abkürzung für margin:auto;, um die Mitte festzulegen. Das Randabkürzungsattribut legt die Seitenränder in vier Richtungen im Uhrzeigersinn fest: oben, rechts, unten und links. Es ist zu beachten, dass Sie falsch liegen, wenn Sie denken, dass Sie den Block nur zentrieren möchten, nachdem Sie das Attribut „margin-top:auto“ gesetzt haben. Bei Verwendung dieser Methode müssen gleichzeitig die Attribute „margin-left:auto;margin-right:auto;“ festgelegt werden, um zentriert zu sein. Sie können es jedoch auch zentrieren, indem Sie margin: 0 auto; festlegen.
Eine andere Möglichkeit zur Zentrierung besteht darin, die Kombination links: 50 % + Rand links: -375 px zu verwenden. Die beiden Zentriermethoden sind wie folgt.

Code kopieren Der Code lautet wie folgt:

/* Methode 1 */
body {
background: #00FF7F;
text-align: center; /* hack for ie center alignlayout */
}
#wrapper{
width: 750px;
margin:auto; /* oder margin-left:auto;margin-right:auto;*/
}
/* Methode 2 */
#wrapper2 {
position: absolut;
width:750px;
margin-left:-375px
}



Ich persönlich verwende immer Methode eins, um es zu zentrieren, weil ich das Gefühl habe, dass den Blöcken in Methode zwei die nötige Steifigkeit fehlt und der Code nicht leicht zu verstehen ist. Wenn Sie das Formular in Methode 2 auf eine bestimmte Grenze reduzieren, werden Sie feststellen, dass das gesamte Layout fließend ist. Natürlich wollen einige Leute diesen Effekt. :) Ein weiterer Vorteil der zweiten Methode besteht darin, dass die text-align: center;-Einstellung des body-Elements in anderen verschachtelten Blöcken nicht überschrieben werden muss, da der größte Teil des Textes weiterhin linksbündig ist. Dadurch kann die Redundanz bis zu einem gewissen Grad reduziert werden. Aber ich denke, dieser Vorteil ist vernachlässigbar. Kurz gesagt: Jeder nimmt sich einfach das, was er braucht, ganz nach seinen eigenen Vorlieben.

Der andere ist der Double-Margin-Fehler des IE. Die Lösung besteht darin, die Einstellung display:inline; Tatsächlich wirkt sich dieser Parsing-Fehler auf viele Aspekte aus. Wenn im CSS-Layout im IE ungewöhnliche Abstände auftreten, können Sie versuchen, die Attributdeklaration display:inline; hinzuzufügen. Und für bestimmte spezifische Layoutprobleme müssen Sie display:block; und display:inline; in Kombination verwenden, um das Layout Ihren Wünschen anzupassen. Ich bin auf ein ähnliches Problem in einem Bildmenü gestoßen, das von einer Unordnungsliste gesteuert wird.

So schnell wie möglich haben verschiedene Browser CSS-Fehler, aber die CSS-Seitenlayoutmethode hat sich bis heute weiterentwickelt und ist relativ ausgereift. Die Wahrscheinlichkeit, dass Sie aufgrund von Fehlern verrückt werden, ist nicht mehr hoch. Wenn Sie Fragen haben, schauen Sie in der Suchmaschine nach, um die meisten Ihrer Probleme zu lösen. Wenn Sie in Ihrer Freizeit einige Experimente durchführen können, können Sie in Notfällen möglicherweise die Ruhe bewahren.