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

StackOverflow https://stackoverflow.com/questions/746531

  •  09-09-2019
  •  | 
  •  

Вопрос

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

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

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

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

div {
   display:inline;
}

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

Являются ли элементы страницы все еще действительными?

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

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

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

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

Это было полезно?

Решение

Из Спецификация CSS 2.1:

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

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

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) анонимного текста.Результирующими блоками будут блок-блоки, представляющие ТЕЛО, содержащие анонимный блок-блок вокруг C1, блок-блок SPAN и другой анонимный блок-блок вокруг C2.

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

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

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

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

Другие советы

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

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

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

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

Являются ли элементы страницы все еще действительными?

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

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top