rost Sep 3 2008 at 15:07

FF3 справедливо наказывает за размещение блочного элемента внутри строкового

1 min

2.6K

Website development*

+35

Comments 55

sitehound Sep 3 2008 at 15:13

Firefox 2 прощал, но потом если клиент захочет валидацию страницы проверить, оно ведь выдаст что сайт не валидный.

rost Sep 3 2008 at 15:27

Конечно. Я же так и пишу: «Чтобы избежать этой ошибки, нужно не помещать тэг div внутрь тэга a,...»

vorbiz Sep 3 2008 at 15:25

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

rost Sep 3 2008 at 15:37

Спасибо, я это и имел в виду (подозреваю, что выразился недостаточно четко). Добавил соотвеструющее резюме в конец поста.

vorbiz Sep 3 2008 at 15:58

Да, извиняюсь, не правильно понял Ваше высказывание.
Решил что Вы предлагаете в качестве решения проблемы просто сделать a блочным, не поменяв при этом семантики.

IntenT Sep 3 2008 at 15:59

а div внутри спан можно помещать?
а див внутри дива c «display: inline»?

vorbiz Sep 3 2008 at 16:33

Див внутри дива можно. Внутри спана нельзя. Тут дело не в том, какой display в css, а в том, каким блок является по определению. Погуглите по поводу списков инлайновых элементов и элементов уровня блока. Все заголовки, дивы, параграфы — блочные элементы, а спаны, инсы, делы, ссылки, имаги и т.д. — строковые. Кстати, к блочным относятся так же элементы ul, ol, li, dl, dd. А вот dt, по умолчанию, строчный (хотя могу и ошибаться).

dshster Sep 3 2008 at 18:46

как ни странно, но img тоже строчный

homm Sep 3 2008 at 18:50

Я бы с вами согласился, если бы не IE с его работаующим только у ссылок: hover

UFO just landed and posted this here

homm Sep 4 2008 at 10:00

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

UFO just landed and posted this here

IntenT Sep 3 2008 at 15:58

Все не так.

В FF3 — если есть блочный элемент — перед ним (сверху) и после него (снизу) добавляются вертикальные отступы.
А «точки» — это «подчекривания» пустых строк до блочного элемента и после него.

UFO just landed and posted this here

Stefani Sep 3 2008 at 16:20

Сурово та как наказывает!

dohlik Sep 3 2008 at 16:25

Правильно делает, что наказывает.

pepelsbey Sep 3 2008 at 18:21

Браузер не должен строить из себя валидатор.
Ему нужно страницу показать максимально хорошо, как только это возможно, даже при косой вёрстке.

leMar Sep 3 2008 at 19:29

>> Браузер не должен строить из себя валидатор.
Согласен. Но он и не строит, «наказывает» это просто форма речи такая.

>> Ему нужно страницу показать максимально хорошо, как только это возможно, даже при косой вёрстке.
Разработчики IE именно этим и мотивировались игнорируя стандарты.

Uratsakidogi Sep 3 2008 at 18:11

Недавно заметил подобный баг на странице результатов в гугле: clip2net.com/clip/m10142/1220451009-clip-5kb.png
Там внутри ссылки размещен спан, инлайновый по-умолчанию, с заданым disply: block. Так что, проблема, скорее всего в чем-то еще.

Uratsakidogi Sep 3 2008 at 19:54

Я, кстати, говорил не о том, что Сам Гугол не без греха, а о том, что причина такого поведения не в диве, а во вложении блочного элемнета внутри строчного, независимо от его названия.

rost Sep 3 2008 at 22:38

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

UFO just landed and posted this here

Uratsakidogi Sep 4 2008 at 20:16

А где inline-block не поддерживается?

UFO just landed and posted this here

Uratsakidogi Sep 5 2008 at 17:45

Недавно делал «кирпичики» на inline-block (в блоке «Анонсы» можно увидеть), проблему в IE решал через задание display: inline только для них (используя диез-хак) — в этом случае они ведут себя сообразно адекватным бруазерам.
Это, конечно неправильно, и именно об этом идет речь в этом топике, но, к сожалению, я не придумал другого способа обойти эту проблему. :-(

UFO just landed and posted this here

Uratsakidogi Sep 5 2008 at 18:29

Для фф2 есть -moz-inline-block и -moz-inline-box. К сожалению, не могу точно сказать, чем именно они отличаются, даже сайт мозиллы молчит на этот счет.

Mutyonok Sep 5 2008 at 13:57

я думал это фича такая у гугла))

Uratsakidogi Sep 3 2008 at 20:01

А если в фаербаге дописать для этих ссылок dispay: block или inline-block (не везде ведь подходит блочное отображение), то все отображается нормально, так что в большинстве случаем эту проблему легко решить.

rost Sep 3 2008 at 22:42

Все верно. Решить можно, только лучше все же не размещать DIV внутри A из соображений семантики. А легкость технического разрешения это проблемы как раз и соблазняет семантику игнорировать.

UFO just landed and posted this here

steinebel Sep 3 2008 at 18:15

Переверстывая чужое — порой ох**ваю. И описанный в топике маразм — еще цветочки.

pepelsbey Sep 3 2008 at 18:16

Лучше бы выводил всплывающее сообщение: «Ятте счас руки оторву!»…
А если серьёзно — то о таких багах нужно сообщать Мозилле. Даже если уже есть такой тикет — чем больше нудят, тем быстрее поправят. Глядишь — в 3.1 войдёт )

xfox Sep 3 2008 at 18:19

Поведение ff3 хорошо иллюстрирует firebug при просмотре html-структуры — там видно, что внешний строчный элемент принудительно закрывается, если внутри него находится блочный.

Vii Sep 3 2008 at 22:58

И при этом строчный элемент еще дублируется в блочном. Буквально вчера обнаружил данную «фишку» ff3 — сначало думал, что firebug глючит.

jackdaniels Sep 3 2008 at 18:23

Firefox 3 вообще по-хорошему «правильный» браузер. В отличие от IE, который «по-плохому». И вот эта его правильность выдаёт нам баги и невалидности, о которых мы и не подозревали в своём коде. «Бо работало ж».

P.S. Прости Рост, это я наверное ж написал… Больше не буду.

rost Sep 3 2008 at 22:43

Хехе, не факт, не факт. Будь :)

-1

maximw Sep 3 2008 at 19:06

Интересно, а эти самые точки внесены в стандарты? Я что-то не видел.
Если я не ошибаюсь и их действительно там нет, то FF3 сам грубо нарушает стандарты. Так что ни в коей мере это не справедливо.

UFO just landed and posted this here

brook Sep 3 2008 at 19:22

Этот трюк часто применялся для выделения блока над которым сейчас курсор мыши, так как для div: hover {} не пашет, по крайней мере в IE6.
Конечно это не самый удачный хак, но он тоже имеет право на жизнь — не всегда есть возможность использовать js (например $('.highlight-me').mouseover… addClass('.hover')) особенно когда речь доходит до клиентской оптимзации в js, прописка в нужномых dom элементах onmouseOver тоже не является хорошим решением.
А вот точки это конечно жёсткий косяк FF3, они бы еще рендерить перестали страницу…

leMar Sep 3 2008 at 19:32

span считается инлайновым элементом. Все простят если вы запихнете его вместо див, а как сделать инлайновый элемент блочным мы все знаем: display: block;

Никаких хаков и js в этом случае вам не надо

brook Sep 3 2008 at 19:35

Иногда спана не хватает. Особенно когда внутри дива ещё дивы и т.д. В примитивном случае, да, спан хороший солюшен.

UFO just landed and posted this here

Dobrii Sep 3 2008 at 19:32

Что за индус догадался див разместить в A О_о

leMar Sep 3 2008 at 19:34

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

Dobrii Sep 3 2008 at 19:57

Скорее всего так оно и есть )

brmn Sep 4 2008 at 01:07

извините, но чтобы снять все глупые вопросы, покажите, пожалуйста, как правильно? включая сss.

Uratsakidogi Sep 4 2008 at 20:22

Смотря какой нужен результат. Либо сделать блоком саму ссылку, либо использовать inline-block, либо что-то еще. Главное помнить, что в строчной элемент может быть вложен только другой строчной элемент или текст.

mryasov Sep 4 2008 at 09:38

чъорт, что с хабром? ну как тут уловить логику в ответах? :)
извините, не по теме, просто ужаснулся ))
___
дополнение — еще и картинки не вставляет… ))
25-kadr.ru/habr.jpg

Show the best of all time