Das CSS-Inline-Block-Attribut ist mit verschiedenen Browsern kompatibel und die Lösung für das Problem der horizontalen Lücke

In diesem Kapitel wird Ihnen das CSS-Inline-Block-Attribut vorgestellt, das mit allen Browsern kompatibel ist, und die Lösung für das Problem der horizontalen Lücke. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Inline-Block-Attributbeschreibung:

Nach dem Festlegen dieses Werts wird das Objekt selbst als Inline-Objekt gerendert , aber der Inhalt des Objekts wird als Blockboxen gerendert. Mit anderen Worten, das Element mit diesem Wertsatz entspricht einem Inline-Box-Element, das Blockboxen enthalten kann. Obwohl IE6 und 7 Inline-Block unterstützen können, ist display:inline-block in ihren Augen nur eine Bedingung zum Auslösen des Layouts und nicht etwas, das vom W3C festgelegt wurde. Wir können jedoch einfach das Layout des IE verwenden, um den Effekt von display:inline-block zu simulieren.

Inline-Block-Kompatibilitätslösungen für verschiedene Browser

Es gibt zwei Methoden: Beide lösen zuerst das IE-Layout aus und definieren dann die Anzeige: inline, lassen Sie das Blockelement selbst wie folgt als Inline-Objekt gerendert werden:

1 Unter allen Attributen, die das Layout auslösen können, nach Ausschluss von position:absolute und float sowie width und height das Die einzigen, die verwendet werden können, sind display:inline-block, wie folgt:

fn-ib{display:inline-block;}fn-i{*display:inline;}

Beachten Sie, dass die beiden Anzeigen nacheinander in zwei CSS-Anweisungen platziert werden müssen, um eine Wirkung zu erzielen. Wenn display:inline-block ist Zuerst definiert, dann die Anzeige wieder auf Inline setzen oder blockieren, das Layout verschwindet nicht.

2. Die erste Methode besteht darin, es in zwei CSS-Anweisungen einzufügen, wenn Sie nicht vorsichtig sind. Das Layout von IE ist wie folgt:

fn-ibz{display:inline-block;*display:inline;*zoom:1}

Aus dem Obigen können wir ersehen, dass IE6 und 7 das Inline-Block-Attribut unterstützen, aber nicht den W3C-Effekt erzielen. Daher verwenden wir Layout und Display: Inline, um den Effekt des Inline-Block-Attributs zu simulieren .

Okay, jetzt gibt es eine Lösung für das Inline-Block-Problem in verschiedenen Browsern. Die nächste Lösung ist: Schauen Sie sich die folgenden Beispiele in verschiedenen Browsern an:

Die Lücke zwischen Inline-Block-Elementen in verschiedenen Browsern liegt in der Natur von Inline selbst und nicht in einem Fehler.

Dann haben wir festgestellt, dass in Browsern, die das Attribut display:inline-block unterstützen, die Inline- und Block-Elemente angezeigt werden :inline -block erzeugt horizontale Lücken; und in IE67 und IE (Q) gibt es nach der Simulation zwei Situationen: display:inline-block: Blockelemente haben nach der Simulation keine Lücken, während Inline-Elemente Lücken haben. Warum? Hier ist ein weiterer Wissenspunkt: Inline-Elemente sind standardmäßig mit Lücken angeordnet. Daher wird das obige Phänomen wie folgt erklärt:

Bei Browsern, die das Attribut display:inline-block unterstützen, entspricht das Element selbst dem Inline-Element, daher gibt es in modernen Browsern Lücken in der simulierten Lösung. Denn obwohl das Festlegen von display:inline für ein Blockelement dazu führen kann, dass es horizontal wie Inline-Elemente angeordnet wird, ist das Blockelement immer noch ein Blockelement und wird nicht wirklich zu einem Inline-Element, sodass keine Lücke entsteht.

Die Hauptursache für Lücken liegt darin, dass Zeichen wie Zeilenumbrüche, Leerzeichen, Tabulatoren usw. in HTML Leerzeichen erzeugen.

Lösung für das horizontale Lückenproblem zwischen Inline-Blöcken

Wir wissen oben, dass die Hauptursache der Lücke das Newline-Zeichen in HTML ist Gibt es kein Problem, wenn wir die Leerzeichen zwischen den Beschriftungen entfernen? Der Code lautet also wie folgt:

HTML-Code lautet wie folgt:

<div class="parent">
    <strong class="fn-ibz">内联元素</strong><strong class="fn-ibz">
    内联元素</strong><strong class="fn-ibz">
    内联元素</strong><strong class="fn-ibz">
    内联元素</strong>
</div>
<div class="parent">
    <div class="fn-ibz">块元素</div><div class="fn-ibz">
    块元素</div><div class="fn-ibz">
    块元素</div><div class="fn-ibz">
    块元素</div>
</div>

Rendering:

Ändern Sie die DOM-Struktur, um das zu lösen Problem zwischen Inline-Block-Lückenproblem

Ich habe den obigen DEMO-Code verarbeitet, daher können wir die Lücke nicht sehen. Aber hier ist das Problem:

Wenn es statisch ist, gibt es eigentlich kein großes Problem. Was ist, wenn es direkt im Hintergrund generiert wird? Oder in Zukunft werden Wartungskollegen sehen, wie dieser Code so geschrieben ist, und ihn wieder ändern. Daher ist die Verwendung von CSS zur Lösung immer noch der beste Weg. Als ich diese Situation zum ersten Mal sah, war meine erste Reaktion, negative Margen zu verwenden, um sie zu lösen. Später, nachdem ich die Grundursache der Lücke erfahren hatte, hatte ich das Gefühl, dass die Methode mit negativen Margen das Problem zwar lösen konnte, aber nicht das Richtige brachte Lösung Die Ursache der Lücke waren die Zeilenumbrüche zwischen HTML-Zeichen, Leerzeichen, Tabulatoren und anderen Zeichen, und die Lücken ändern sich mit Änderungen in Attributen wie der Schriftgröße. Sie können also CSS verwenden, um die Zeichengröße zu steuern, um eines zu finden. Unter Bezugnahme auf die Lösung in YUI3 erhielt ich den folgenden Code:

.f-w-p-parent{
    font-size:0;
    letter-spacing:-4px;
    *letter-spacing:normal;
    *word-spacing:-1px;
}
.f-w-p-inner{
    font-size:12px;
    letter-spacing:normal;
    *word-spacing:normal;
    vertical-align: top;
}

Rendering:

Lösung für CSSinline-Block-Lücke

Dann analysieren wir die Funktion jeder Codezeile:

1. Die Rolle der Schriftgröße: Da sie durch Zeichen verursacht wird, setzen Sie deren Schriftgröße natürlich auf 0 und setzen Sie dann die Schriftgröße innerhalb des Elements wieder auf ihre ursprüngliche Größe zurück. Mit Ausnahme von IE6, 7 und anderen Browsern mit niedrigeren Versionen von Chrome und Safari verschwindet die Inline-Block-Lücke in diesem Schritt (niedrigere Versionen von Chrome können nicht zulassen, dass Text nach dem Festlegen von „font-size:0“ frei erweitert und verkleinert wird, also ist dies nicht der Fall empfohlen)

2. Die Rolle des Wortabstands: Im IE6-, 7- und IE (q)-Modus gibt es immer einen Abstand von 1 Pixel, und dann verwenden wir Wortabstand: -1 Pixel zu lösen (Der Abstand zwischen Wörtern ist nur für Englisch nützlich, Chinesisch hat kein Wortkonzept) und bringt dann das Element in den Normalzustand zurück. Natürlich ist es auch möglich, margin:0 0 0 -1px zu verwenden (es scheint weniger Code zu geben ...)

3. Die Rolle des Buchstabenabstands: nur gering In den Chrome- und Safari-Versionen dient der Buchstabenabstand dazu, den Abstand zwischen Wörtern anzupassen, da Buchstabenabstand, Schriftgröße, Schriftfamilie und sogar verschiedene Browser unterschiedlich sind, so die „Datentabelle zur Beziehung zwischen“. „Buchstabenabstand und Schriftgröße/Schriftart“ Durch Einstellen der oben genannten Daten kann die Lücke geschlossen werden. Da Buchstabenabstand und Wortabstand zusammen leicht zu Problemen führen können, wurde der Code *letter-spacing:normal;

4. Die Rolle von Vertical-Align:Top: Die letzte Funktion hat nichts mit Lücken zu tun. Das Festlegen von Vertical-Align:Top besteht darin, die Inline-Block-Elemente an der oberen Grundlinie auszurichten. Das Vertical-Align-Attribut ist nur für Inline- und Inline-Block-Elemente gültig.
   

Vorteile des Inline-Blocks

Es wird hier nicht erwähnt, dass das Inline-Block-Layout das Durchsuchen erspart im Vergleich zum Floating-Layout Um die Serverressourcen zu reduzieren, müssen wir das Floating-Layout aufgeben und das Inline-Block-Layout übernehmen (und die offizielle Website sagt dies nicht). Schließlich hat das Aussehen einer Sache ihre Bedeutung, und das Floating-Layout ist auch das bekannteste Layout-Methode. Nach einer detaillierten Analyse der spezifischen Situation ist es also klar, dass die schwebende Layoutstruktur klarer ist, aber Sie müssen Inline-Block verwenden und viel redundanten Code hinzufügen, selbst wenn das Inline-Block-Layout wirklich am wenigsten ist ressourcenintensiv wie legendär, aber würde die Vergrößerung Ihres HTML-Codes nicht auch Ressourcen verbrauchen?

Selbst wenn es das gibt, glaube ich nicht, dass es groß ist. Wenn Sie also absolute Positionierung verwenden, verwenden Sie Floating. Wenn Sie auf eine Situation stoßen, in der das Problem besser gelöst werden kann, verwenden Sie es mutig. Schließlich hat der Inline-Block immer noch einige Vorteile gegenüber der schwebenden und absoluten Positionierung.

1. Sie können Vertical-Align und Text-Alignment verwenden, um eine vertikale, horizontale, beidseitige, Grundlinienausrichtung usw. zu erreichen, und es ist auch adaptiv.

2. Aus eigenen Gründen eignet es sich besonders für flüssiges Layout. Höhe und Breite müssen nicht festgelegt werden.

Das obige ist der detaillierte Inhalt vonDas CSS-Inline-Block-Attribut ist mit verschiedenen Browsern kompatibel und die Lösung für das Problem der horizontalen Lücke. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!