Неправильно ли изменить элемент блока на встроенный CSS, если он содержит другой элемент блока?

Я знаю, что неправильно помещать элемент блока внутри встроенного элемента, но как насчет следующего?

Представьте эту допустимую разметку:

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

Теперь добавьте этот CSS:

div {
   display:inline;
}

Это создает ситуацию, когда встроенный элемент содержит элемент блока (div становится встроенным, а p является блоком по умолчанию)

Сохраняются ли элементы страницы?

Как и когда мы судим, действителен ли HTML - до или после применения правил CSS?

ОБНОВЛЕНИЕ:. С тех пор я узнал, что в HTML5 вполне допустимо размещать элементы уровня блока внутри тегов ссылок, например:

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

Это действительно полезно, если вы хотите, чтобы большой блок HTML был ссылкой.

ОТВЕТЫ

Ответ 1

Из CSS 2.1 Spec:

Когда встроенное поле содержит блок уровня блока в потоке, встроенный блок (и его встроенные предки в одном и том же поле строки) разбивается вокруг блока блочного уровня (и всех браслетов уровня блока, которые являются последовательными или разделенные только сбрасываемыми пробелами и/или элементами вне потока), разбивая встроенный блок на два поля (даже если обе стороны пусты), по одному с каждой стороны блока (ов) блока уровня. Ящики строк перед перерывом и после разрыва заключены в анонимные блок-блоки, а блок уровня блока становится родным из этих анонимных ящиков. Когда такое встроенное поле влияет на относительное позиционирование, любой результирующий перевод также влияет на блок-уровень, содержащийся в встроенном поле.

Эта модель применима в следующем примере, если следующие правила:

p    { display: inline }
span { display: block }

были использованы с этим документом HTML:

<!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>

Элемент P содержит кусок (C1) анонимного текста, за которым следует элемент уровня блока, за которым следует еще один фрагмент (C2) анонимного текста. Результирующими блоками будет блок-блок, представляющий BODY, содержащий анонимный блок-блок вокруг C1, блок блока SPAN и еще один анонимный блок-блок вокруг C2.

Свойства анонимных ящиков наследуются из закрывающего не анонимного поля (например, в примере чуть ниже заголовка подраздела "Анонимные блочные блоки", то есть для DIV). Первоначальное значение имеют не унаследованные свойства. Например, шрифт анонимного поля наследуется от DIV, но поля будут равны 0.

Свойства, установленные для элементов, которые вызывают создание анонимных блоков блоков, по-прежнему применяются к полям и содержимому этого элемента. Например, если граница была установлена ​​на элементе P в приведенном выше примере, граница будет нарисована вокруг C1 (открывается в конце строки) и C2 (открывается в начале строки).

Некоторые пользовательские агенты реализовали границы на встроенных строках, содержащих блоки другими способами, например, путем обертывания таких вложенных блоков внутри "анонимных строк строки" и, таким образом, рисования внутренних границ вокруг таких полей. Поскольку CSS1 и CSS2 не определяли это поведение, пользовательские агенты, основанные только на CSS1 и CSS2, могут реализовать эту альтернативную модель и по-прежнему заявлять о соответствии этой части CSS 2.1. Это не относится к UA, разработанным после выпуска этой спецификации.

Сделайте то, что хотите. Понятно, что поведение указано в CSS, хотя он охватывает все случаи или постоянно реализуется в браузерах сегодня, неясно.

Ответ 2

Независимо от того, действительно ли это или нет, структура элемента неверна. Причина, по которой вы не добавляете элементы блока внутри встроенных элементов, заключается в том, что браузер может легко отображать элементы.

Даже если он не нарушает никаких правил ни для HTML, ни для CSS, он все же создает элементы, которые невозможно отобразить по назначению. Браузер должен обрабатывать элементы так же, как если бы код HTML был недействительным.

Ответ 3

HTML и CSS оба будут действительны. В идеале вам не нужно будет делать что-то подобное, но этот конкретный бит CSS на самом деле является удобным (и синтаксически корректным, но не семантически корректным) способом для получения двойной ошибки маркера Internet Explorer, не прибегая к условным таблицам стилей или хакам, которые недействительны ваш CSS. HTML (X) имеет больше семантического значения, чем CSS, поэтому менее важно, чтобы CSS был семантически корректным. На мой взгляд, это приемлемо, потому что оно решает проблему раздражающего браузера без аннулирования кода.

Ответ 4

HTML проверяется независимо от CSS, поэтому страница все равно будет действительна. Я уверен, что спецификация CSS ничего не говорит об этом, но не цитируйте меня на этом. Тем не менее, я был бы очень осторожен, используя такую ​​технику, поскольку пока она может отображаться так, как предполагалось в некоторых браузерах, вам нужно будет проверить их все: я не вижу много гарантий.

Ответ 5

Сохраняются ли элементы страницы?

"Действительный" в смысле HTML, да; HTML ничего не знает о CSS.

Однако рендеринг, который вы получаете в браузере, составляет undefined по спецификации CSS, поэтому он может выглядеть как что угодно вообще. Хотя вы можете включить такое правило в CSS-хаки, нацеленные на один конкретный браузер (где вы знаете, как этот браузер отображает этот случай), он не должен обслуживаться браузерами в целом.

Ответ 6

Я не знаю, с моей точки зрения, если это подтвердит какие-либо правила, но я бы рекомендовал использовать W3C HTML Validator и W3C CSS Validator, чтобы определить это. Надеюсь, это будет полезно!

Ответ 7

Я думаю, (x) html действителен, css действителен. Верен ли результат? Да, если он ищет в браузере, как вы хотите.

Ответ 8

Нет, это неправильный выбор. Мы можем использовать согласно требованиям.

Ответ 9

Если логика вы следуете, и вы в конечном итоге реализуете ее так, это НЕ НЕПРАВИЛЬНО. Рабочие вещи не являются "неправильными" только потому, что они странные. Да, это довольно необычно, но он ПОМОГАЕТ, и это не ошибка. Это намеренно. HTML и CSS должны служить вам, а не наоборот, поэтому никогда не слушайте комментарии, говорящие вам не делать этого только потому, что это уродливо.

Типично назвать решение "недействительным" и предложить длинный путь вокруг блока. Иногда вы можете переосмыслить, что вы сделали. Но может быть много причин для того, что вы сделали, и они не считают их.

Я регулярно использую блоки внутри встроенных строк. Он действителен и работает - он просто не нужен в большинстве случаев. И что. Помните, когда XHTML велел нам всегда ставить кавычки вокруг свойств (и все кричали на вас, если вы этого не сделали!), Теперь HTML5 позволяет опустить их, если внутри нет места. Что случилось с последним слэшем после особых тегов? "< br/ > "? Давай. Изменение стандартов. Но браузеры также поддерживают нестандартные вещи. CENTER устарел; мы в 2013 году, и он все еще работает. ТАБЛИЦА для вертикального центрирования? Иногда это единственный способ. DIV внутри A, чтобы он зависал, как вы планировали? Просто продолжайте.

Сосредоточьтесь на важных вещах.