Ist es falsch, ein Block-Element zu ändern, um mit CSS inline, wenn es einer anderen Block-Elemente enthält?
https://stackoverflow.com/questions/746531
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich weiß, es ist falsch, ein Block-Element innerhalb eines Inline-Element zu setzen, aber was ist mit den folgenden?
Stellen Sie sich diesen gültigen Markup:
<div><p>This is a paragraph</p></div>
Jetzt diese CSS hinzufügen:
div {
display:inline;
}
Dies schafft eine Situation, in der ein Inline-Element ein Blockelement enthält (Das div wird inline und die p-Block in der Standardeinstellung)
Sind die Seitenelemente noch gültig?
Wie und wann wir beurteilen, ob die HTML gültig ist - bevor oder nachdem die CSS-Regeln angewandt werden
UPDATE: Ich habe da gelernt, dass in HTML5 es völlig in Ordnung ist Blockebene Elemente innerhalb Link-Tags setzen zB:
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
Dies ist eigentlich wirklich nützlich, wenn Sie ein großer Block von HTML wollen ein Link sein.
Lösung
Aus CSS 2.1 Spec :
Wenn eine Inline-Box enthält eine in Strömungs Block-Box, die Inline-Box (und seine inline Vorfahren innerhalb der gleichen Zeile Box) sind um die Block-Level-Box gebrochen (und alle Block-Geschwister, die fortlaufend sind oder nur durch kollabierbare Leerzeichen getrennt und / oder out-of-flow-Elemente), die Inline-Box in zwei Felder aufgeteilt (auch wenn auf beiden Seiten leer sind), eine auf jeder Seite der Blockebene-Box (en). Die Zeilen-Boxen vor der Pause und nach der Pause werden in anonymen Block-Boxen, und die Block-Level-Box wird ein Geschwister jener anonymen Kisten eingeschlossen. Wenn eine solche Inline-Box durch die relative Positionierung beeinflusst wird, wirkt sich eine daraus resultierende Übersetzung auch die Box auf Blockebene in der Inline-Box enthalten sind.
Dieses Modell ist in dem folgenden Beispiel, wenn die folgenden Regeln gelten würde:
p { display: inline } span { display: block }wurden mit diesem HTML-Dokument verwendet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HEAD> <TITLE>Anonymous text interrupted by a block</TITLE> </HEAD> <BODY> <P> This is anonymous text before the SPAN. <SPAN>This is the content of SPAN.</SPAN> This is anonymous text after the SPAN. </P> </BODY>Das P-Element enthält ein Stück (C1) von anonymem Text, gefolgt von einem Block-Elemente von einer anderen Klotz (C2) anonymem Text folgt. Die so erhaltenen Schachteln würde ein Blockfeld repräsentieren den Körper, einen anonymen Block Kasten um C1, der SPAN Blockfeld und ein anderer Block Kasten um anonymous C2 enthält.
Die Eigenschaften von anonymous Kästen sind aus der umschließenden nicht anonymen Box (beispielsweise in dem Beispiel, gerade unterhalb der Unterabschnitt „Anonymous Block-Box“, das einen für DIV Überschrift) geerbt. Nicht vererbten Eigenschaften haben ihren Ausgangswert. Zum Beispiel wird die Schriftart der anonymen Box aus dem DIV geerbt, aber die Margen 0 sein.
Eigenschaften auf Elemente festgelegt, die anonymen Block-Boxen führen zu den Boxen und den Inhalt dieses Elements erzeugen weiterhin gelten werden. Zum Beispiel war, wenn eine Grenze auf dem P-Elemente in dem obigen Beispiel eingestellt wurde, würde der Rahmen um C1 (offen am Ende der Linie) und C2 (geöffnet am Anfang der Zeile) gezogen werden.
Einige Benutzeragenten implementiert haben Grenzen auf inlines Blöcke auf andere Weise enthält, beispielsweise durch eine solche verschachtelte Blöcke innerhalb „anonymous Zeilen-Boxen“ Einwickeln und damit zeichnen Inline-Rahmen um solche Boxen. Als CSS1 und CSS2 haben dieses Verhalten nicht definieren, CSS1-only und CSS2-only Benutzerprogramme kann dieses alternative Modell implementieren und noch Konformität Anspruch auf diesen Teil von CSS 2.1. Dies gilt nicht für UAs entwickelt, nachdem diese Spezifikation veröffentlicht wurde.
Machen das, was man so will. Deutlich wird das Verhalten in CSS angegeben, obwohl ob es alle Fälle abdeckt, oder wird konsequent in der heutigen Browsern implementiert ist unklar.
Andere Tipps
Unabhängig davon, ob es gültig ist oder nicht, ist die Elementstruktur falsch. Der Grund, dass Sie nicht über Blockelemente innerhalb Inline-Elemente gesetzt ist, so dass der Browser die Elemente in einer leicht vorhersagbaren Weise machen kann.
Auch wenn es keine Regeln für entweder bricht HTML oder CSS, schafft es immer noch Elemente, die wie vorgesehen werden können, nicht gerendert. Der Browser hat, um die Elemente zu behandeln, als ob der HTML-Code ist ungültig.
Die HTML und CSS die sowohl nach wie vor gültig. Im Idealfall würden Sie so etwas wie dies zu tun haben, nicht, aber das bestimmte Bit von CSS ist eigentlich eine handliche (und syntaktisch gültig, aber nicht semantisch gültig) Art und Weise für die bedingten Sheets oder Hacks ohne Rückgriff Internet Explorer doppelten Marge Fehler erhalten, die ungültig wird Ihre CSS. Die (X) HTML hat mehr semantischen Wert als der CSS, so ist es weniger wichtig, dass die CSS semantisch gültig ist. In meinem Kopf ist es akzeptabel, weil es ein lästiges Browser-Problem löst, ohne den Code ungültig zu machen.
Die HTML wird unabhängig von den CSS validiert, so würde die Seite noch gültig sein. Ich bin ziemlich sicher, dass die CSS-Spezifikation sagt nichts darüber auch nicht, aber zitieren Sie mich nicht auf, dass ein. Allerdings würde ich sehr vorsichtig sein, eine Technik, wie diese verwendet wird, wie während es machen könnte, wie in einigen Browsern bestimmt ist, müssen Sie ‚testen em alle-ich nicht viele Garantien gemacht werden.
Sind die Seitenelemente noch gültig?
„Gültig“ in einem HTML-Sinne, ja; HTML weiß nichts über CSS.
Das Rendern Sie im Browser erhalten, jedoch ist ‚undefined‘ durch die CSS-Spezifikation, so ist es überhaupt wie alles aussehen könnte. Während Sie eine solche Regel in CSS-Hacks soll an einem bestimmten Browser enthalten könnte (wo Sie wissen, wie das Browser diesen Fall macht), sollte es nicht an Browser in der Regel serviert werden.
Ich weiß nicht, die Spitze von meinem Kopf ab, wenn dies alle Regeln überprüft, aber ich würde empfehlen, die W3C HTML Validator und die W3C CSS Validator dass zu bestimmen. Hoffe, das ist hilfreich!
Nein, es ist keine falsche Wahl. Wir können wie pro Anforderungen verwendet werden.
Wenn es eine Logik ist es, Sie folgen und Sie am Ende es so Umsetzung, dann ist es nicht falsch. Arbeiten sind die Dinge nicht „falsch“, nur weil sie komisch sind. Ja, es ist recht ungewöhnlich, aber es hilft, und es ist kein Fehler. Es ist beabsichtigt. HTML und CSS sollten Sie, nicht andersrum dienen um hören so nicht immer auf Kommentare, die Sie sagen, es nicht nur zu tun, weil es hässlich ist.
Es ist typisch, eine Lösung „ungültig“ rufen und einen langen Weg um den Block vor. Manchmal kann man überdenken, was Sie getan haben. Aber es kann viele Gründe geben, was Sie getan haben und sie sie nicht in Betracht ziehen.
. muss ich regelmäßig Blöcke innerhalb inlines verwenden Es ist gültig und es funktioniert - es ist einfach nicht notwendig, in den meisten Fällen. Na und. Denken Sie daran, wenn XHTML uns gesagt, immer in Anführungszeichen Eigenschaften setzen (und jeder schrie Sie, wenn Sie nicht!), Jetzt erlaubt HTML5 sie wegzulassen, wenn es im Inneren kein Raum ist. Was geschah mit dem letzten Schrägstrich nach Einzahl-Tags? "
"? Komm schon. Standards ändern. Aber Browser halten unterstützt Nicht-Standard-Dinge auch. CENTER ist veraltet; wir sind im Jahr 2013 und es funktioniert immer noch. TABELLE für vertikale Zentrierung? Manchmal ist es der einzige Weg. DIV innen A, um es wie geplant zu machen schweben? gehen Sie einfach weiter.
Fokus auf wichtige Dinge.
Ich denke, (x) html gültig ist, CSS gültig ist. Ist das Ergebnis gültig? Ja, wenn sie im Browser sucht, wie Sie wollen.
