Ребят срочно нужна помощь по верстке , браузер не адекватно видит код [требует правки]

226
01 марта 2018, 11:04

Есть меня в котором браузер не корректно выполняет код так же есть на сайте аналогичное меню которое работает вполне нормально, спрашивайте отвечу на все вопросы

Если голосуете против пожалуйста аргументируйте свое мнение

Answer 1

Браузер, видит Ваш код ровно в том виде, в котором Вы его написали и видит его адекватно. Сейчас я постараюсь объяснить, что же все-таки случилось.

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

  1. Нажать на правую клавишу мыши
  2. Выбрать пункт "просмотр кода страницы"

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

В соответствии с этим Ваш вопрос сводится к следующему: Почему реальная DOM-структура страницы отличается от исходного кода?

Ответ прост: Реальная DOM-структура не может соответствовать исходному коду, потому что исходный код содержит ошибки.(в рамках формата HTML4.1 - см. UPD1)

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

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

В чем была Ваша ошибка? В соответствии с правилами вложения тега <a>

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

Поэтому браузер увидев <div>ы внутри тега <a>, просто вытащил их наружу.

UPD1

Написанное Выше описывает поведение в конкретно взятом случае и как верно заметил пользователь @Air, в "новом" стандарте HTML5 уже другие правила, поэтому следует чуть подробнее разобрать данный случай и уточнить стандарты.

Для начала:

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

Отсюда возникает вопрос: Каким образом браузер определяет с каким именно стандартом сравнивать Ваш документ и как он определяет версию документа?

Для этого необходимо познакомиться с понятием DOCTYPE:

Что такое DOCTYPE?

DOCTYPE-объявление располагается в самом начале кода HTML-документа и необходимо для переключения браузера в режим соответствия стандартам. Только в этом режиме можно рассчитывать на единообразное отображение HTML-страницы в разных браузерах. (Браузер — это программа для просмотра сайтов.)

Без DOCTYPE (либо при неправильном DOCTYPE) браузеры отображают страницу в режиме совместимости со старыми браузерами — вплоть до имитации их ошибок (багов). Кроме того, современные возможности (например, поддержка CSS-свойства padding для элемента IMG) доступны только в режиме соответствия стандартам. Следует всегда снабжать HTML-документы DOCTYPE-объявлением.

Соответственно, если Вы осознанно хотите переключиться в режим соответствия HTML5, Вам обязательно необходимо указать в начале документа DOCTYPE.

Для HTML5 он будет выглядеть следующим образом:

<!DOCTYPE html>

Для других версий стандарта DOCTYPE можно посмотреть перейдя на следующую страницу:

https://www.w3schools.com/tags/tag_doctype.asp

READ ALSO
Что значит log group capacity?
MySQL

Что значит log group capacity?

В логе ошибок mysql найдены следующие строки:

 214
UPDATE IF ELSE Mysql
MySQL

UPDATE IF ELSE Mysql

Не могу разобраться в условиях IF ELSE, проверяем bank_book >= price_tariff, если TRUE до выполняем условие, если нет, то изменяем pay_status = '0'Понимаю что можно...

 201
Запись в MySQL в разные таблицы
MySQL

Запись в MySQL в разные таблицы

Я парсю сайтМне нужно распарсить 2 категории Fresh и Bekery и занести данные в БД

 215
НЕ могу понять ошибку в написании триггера mysql
MySQL

НЕ могу понять ошибку в написании триггера mysql

При добавлении новой строки в таблицу выскакивает ошибка ERROR 1442 (HY000): Can't update table 'parts' in stored function/trigger because it is already used by statement which invoked this stored...

 144