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

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

43 голосов
/ 14 апреля 2009

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

Представьте себе эту действительную разметку: 

<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 был ссылкой.

Ответы [ 9 ]

25 голосов
/ 17 апреля 2009

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

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

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

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

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

15 голосов
/ 14 апреля 2009

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

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

5 голосов
/ 14 апреля 2009

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

1 голос
/ 14 апреля 2009

Элементы страницы все еще действительны?

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

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

1 голос
/ 14 апреля 2009

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

0 голосов
/ 13 декабря 2013

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

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

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

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

0 голосов
/ 26 мая 2009

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

0 голосов
/ 14 апреля 2009

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

0 голосов
/ 14 апреля 2009

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

...