Ist es falsch, ein Blockelement mit CSS in Inline umzuwandeln, wenn es ein anderes Blockelement enthält?

Ich weiß, dass es falsch ist, legen Sie ein block-element innerhalb eines inline-Elements, aber was ist mit den folgenden?

Vorstellen, dass dieser gültig markup:

<div><p>This is a paragraph</p></div>

Nun fügen Sie dieses CSS:

div {
   display:inline;
}

Dies schafft eine situation, wo ein inline-element ein block-element (div wird der inline-und der p-block-Standard)

Sind die Bestandteile der Seite noch gültig?

Wie und Wann beurteilen wir, ob das HTML Valide ist - vor oder nach den CSS-Regeln werden angewendet?

UPDATE: ich habe da gelernt, dass in HTML5 ist es vollkommen gültig zu setzen, block-level-Elemente innerhalb der link-tags, z.B.:

<a href="#">
      <h1>Heading</h1>
      <p>Paragraph.</p>
</a>

Dies ist eigentlich wirklich nützlich, wenn Sie einen großen block von HTML-Code einen link.

InformationsquelleAutor der Frage Matthew James Taylor | 2009-04-14

23

Aus der CSS 2.1 Spec:
Wenn eine inline-box enthält eine in-flow-block-level-box, die inline-box (und Ihre inline-Vorfahren in der gleichen Zeile Feld) gebrochen werden um den block-level-box (und alle block-level-Geschwister, die aufeinanderfolgend oder getrennt nur durch Reduzierbare Leerzeichen und/oder out-of-flow-Elemente), die Aufteilung der inline-box in zwei Boxen (auch wenn eine Seite leer ist), eine auf jeder Seite der block-level-box(es). Die line-Boxen vor der Pause und nach der Pause sind eingeschlossen in eine anonyme block-Boxen, und die block-level-box wird ein Geschwisterchen von diesen anonymen Kisten. Wenn eine inline-box beeinflusst wird durch die relative Positionierung entstehende übersetzung wirkt sich auch auf die block-level-box enthalten, in der inline-box.

Diesem Modell gelten würde, die im folgenden Beispiel, wenn Sie die folgenden Regeln:
```
p { display: inline }
span { display: block }
```
wurden verwendet dieses HTML-Dokument:
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
 <TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
 <BODY>
 
 This is anonymous text before the SPAN.
 This is the content of SPAN.
 This is anonymous text after the SPAN.
 
 </BODY>
```
P-element enthält ein Stück (C1) anonymen text, gefolgt von einem block-level-element gefolgt von einem weiteren Stück (C2) der anonyme text. Die resultierenden Boxen wäre eine block-box, die Repräsentation des KÖRPERS, die eine anonyme block-box um C1, der SPAN-block-box und andere anonyme block-box rund um C2.

Den Eigenschaften des anonymen Kisten sind geerbt von den umgebenden nicht-anonymen Feld (z.B. in dem Beispiel unten nur die subsection-überschrift "Anonyme block-Boxen", die man für DIV). Nicht geerbte Eigenschaften Ihren Ausgangswert. Zum Beispiel, die Schrift der anonymen box ist geerbt vom DIV, aber die Margen werden 0.

Eigenschaften auf die Elemente, die verursachen, anonyme block-Boxen erzeugt werden, gelten weiterhin die Felder und den Inhalt des Elements. Zum Beispiel, wenn eine Grenze gesetzt wurde, die auf das P-element im obigen Beispiel, die Grenze hätte gezogen werden, um C1 (Ende der Linie) und C2 (offen an den Anfang der Zeile).

Einige user-agents implementiert haben, Grenzen auf inlines mit Blöcken auf andere Weise, z.B. durch umwickeln mit solchen verschachtelten Blöcken im "anonymen Zeilen-Boxen" und damit Zeichnung inline-Grenzen um solche Boxen. Wie CSS1 und CSS2 nicht definieren dieses Verhalten, CSS1-und CSS2-nur die user-agents zu implementieren, die dieses alternative Modell und immer noch behaupten die Konformität mit diesem Teil von CSS 2.1. Dies gilt nicht für UAs entwickelt, die nach dieser Spezifikation veröffentlicht wurde.
Machen Sie, was Sie wollen. Klar ist das Verhalten spezifiziert in CSS, obwohl, ob es deckt alle Fälle ab, oder ist konsequent umgesetzt werden, über die heutigen Browser ist unklar.

InformationsquelleAutor der Antwort Alohci
14

Unabhängig davon, ob es gültig ist oder nicht, die element der Struktur ist falsch. Der Grund, dass Sie nicht setzen Sie block-Elemente in inline-Elementen ist, so dass der browser das Rendern der Elemente in einer leicht vorhersagbaren Weise.

Selbst wenn es nicht zu brechen alle Regeln, die für HTML-oder CSS -, noch schafft es Elemente, die nicht gerendert werden, wie vorgesehen. Der browser hat, um die Elemente zu behandeln, als wenn der HTML-code war ungültig.

InformationsquelleAutor der Antwort Guffa
5

Die HTML-und die CSS wird immer noch gültig sein. Im Idealfall würden Sie nicht so etwas tun, aber das Besondere etwas CSS ist eigentlich eine praktische (und syntaktisch gültig, aber nicht semantisch gültig) Weg für immer den Internet Explorer double-margin-bug, ohne Rückgriff auf bedingte stylesheets oder hacks, die das erlöschen der CSS. Die (X)HTML verfügt über mehr semantische Wert als die CSS, so ist es weniger wichtig, dass das CSS ist semantisch gültig. In meinem Meinung, es ist akzeptabel, denn er löst eine lästige browser-Problem, ohne ungültig code.

InformationsquelleAutor der Antwort VirtuosiMedia
2

Der HTML-Code validiert, unabhängig von der CSS, damit die Seite noch gültig sein. Ich bin ziemlich sicher, dass die CSS-Spezifikation sagt nichts über es, aber zitieren Sie mich nicht auf. Allerdings würde ich sehr vorsichtig sein, mit einer Technik, wie Sie, während Sie es machen könnte, wie beabsichtigt, die in einigen Browsern, würden Sie brauchen, um zu testen 'em all—ich sehe nicht viele Garantien gemacht werden.

InformationsquelleAutor der Antwort Samir Talwar
1

Sind die Bestandteile der Seite noch gültig?

"Gültig" in einer HTML-Sinn, ja; HTML-weiß nichts über CSS.

Rendering erhalten Sie im browser, jedoch ist 'undefined' durch die CSS-Spezifikation, so könnte es Aussehen überhaupt nichts. Während Sie so in der Regel in CSS-hacks richtet sich an einen bestimmten browser (wo du weißt wie das browser rendert diesem Fall), sollte es nicht serviert werden, auf die Browser im Allgemeinen.

InformationsquelleAutor der Antwort bobince
0

Ich weiß nicht, aus der Spitze von meinem Kopf, wenn diese überprüft alle Regeln, aber ich würde empfehlen, mit der W3C-HTML-Validator und die W3C CSS Validator zu bestimmen. Hoffe, das ist hilfreich!

InformationsquelleAutor der Antwort Adam Alexander
-1

Ich denke, (x)html ist Valide css ist Valide. Ist das Ergebnis gültig? Ja, wenn Sie eine Suche in den browser, wie Sie wollen.

InformationsquelleAutor der Antwort Sergei Kovalenko
-1

Nein, Es ist nicht eine falsche Wahl. Wir können wie pro Anforderungen.

InformationsquelleAutor der Antwort
-1

Wenn es eine Logik Sie Folgen, und Sie am Ende der Umsetzung, wie diese, ist es NICHT FALSCH. Arbeiten, die Dinge sind nicht "falsch", nur weil Sie komisch. Ja, es ist ziemlich ungewöhnlich, aber es HILFT und es ist nicht ein Fehler. Es ist Absicht. HTML und CSS dienen sollten, Sie, nicht die andere Weise herum, damit nicht immer anhören, Kommentare, Sie, es nicht zu tun, nur weil es hässlich ist.

Ist es typisch zu nennen, eine Lösung "ungültig" ist, und empfehlen eine lange Weg um den block. Manchmal können Sie überdenken, was Sie getan haben. Aber es kann viele Gründe für das, was Sie Taten, und Sie nicht berücksichtigen.

Ich tun, verwenden Sie die Blöcke innerhalb inlines regelmäßig. Es ist zulässig und es funktioniert - es ist einfach nicht notwendig in den meisten Fällen. So was. Denken Sie daran, wenn XHTML sagte uns immer, setzen Sie Anführungszeichen um die Eigenschaften (und jeder schrie, wenn Sie gar nicht!), nun HTML5 ermöglicht aufheben, um Sie, wenn es ist kein Platz im inneren. Was ist passiert, dass die letzten Schrägstrich nach der singular-tags? " " ? Kommen auf. Standards ändern. Aber Browser halten die Unterstützung für nicht-standard-Dinge auch. CENTER ist veraltet, wir sind im 2013 und es funktioniert immer noch. TABELLE für die vertikale Zentrierung? Manchmal ist es der einzige Weg. DIV in Ein, um es schweben, so, wie Sie geplant? Gehen Sie nur Voraus.

Fokus auf die wichtigen Dinge.

InformationsquelleAutor der Antwort dkellner

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.