div внутри якоря

Это не происходит все время. Ошибка не является ошибкой, если ее нельзя воспроизвести!

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

<a style="display:block;" href="link">
 <div>text1</div>
 <div>text2</div>
</a>

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

Реальные скриншоты:

http://cupacupelor.ro/img/help.jpg
http://www.carbroker.ro/img/help.jpg

Кто-нибудь сталкивался с этой проблемой? Есть ли решение? Меня не интересуют исправления, связанные с JavaScript!


html hyperlink
person Sorin    schedule 07.07.2009    source источник
comment
Это происходит во всех браузерах?   -  person Rine le Comte    schedule 07.07.2009
comment
Это похоже на проблему с вашим CSS. Пожалуйста, убедитесь, что ширина, которую вы даете элементам, подходит. Я видел множество проблем, связанных с непоследовательным отображением CSS, когда вы не дали понять браузеру, какой макет вы хотите использовать, и предоставили браузеру разобраться с этим за вас. Убедитесь, что макет, размер и положение ваших элементов указаны.   -  person Lior Cohen    schedule 07.07.2009
comment
Подтвердить. Подтвердить. Подтвердить. validator.w3.org У вас есть ошибки, обнаруживаемые компьютером.   -  person Quentin    schedule 07.07.2009
comment
Это происходит во всех браузерах, но не каждый раз. Пожалуйста, просмотрите сайт и посмотрите меню, оно выглядит нормально.   -  person Sorin    schedule 07.07.2009
comment
возможный дубликат Правильно ли помещать div внутри привязки? < /а>   -  person blo0p3r    schedule 14.01.2015

Ответы (2)


arrow_upward
19
arrow_downward

Я предполагаю, что ваши div в ссылках вызывают несогласованность в некоторых браузерах (может быть, ваш css играет здесь).

«Семантика», допустимая разметка — это модные словечки.

Итак, зачем вам нужны DIV в теге <A>. Вы можете попробовать что-то вроде этого

<a href="#">
       <span class="divstyle">Text 1</span>
       <span class="divstyle">Text 2</span>
</a>

затем в CSS

.divstyle { 
    display: block; //and other styles etc
 }
person TigerTiger    schedule 07.07.2009

arrow_upward
12
arrow_downward

Проверьте свою страницу в валидаторе HTML. Я на 90% уверен, что у вас не может быть элемента <div> внутри встроенных элементов, таких как <a>. Несмотря на то, что вы установили ссылку на display:block, это все еще не разрешено, и браузеры могут плюнуть своим фиктивным.

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

<style type="text/css">
  .link, .link span { display: block; }
</style>
<a class="link" href="example.com">
 <span>text1</span>
 <span>text2</span>
</a>
person DisgruntledGoat    schedule 07.07.2009
comment
Вы правы, блочные элементы внутри встроенных элементов вызывают ошибки рендеринга, поскольку браузер перемещает недопустимо размещенный div снаружи (сразу после) тега привязки. Это то, что вызывает сбой рисования. - person Rahul; 07.07.2009
comment
Разве ‹span style=block не совпадает с ‹div ?? Теперь они блочные элементы, оба !! - person Sorin; 07.07.2009
comment
Да, если вы установите span на display:block, то результат будет таким же, как div. Однако спецификация говорит, что любой элемент, который естественным образом является встроенным, не может содержать естественно блочные элементы. Это кажется глупым, но я это причина совместимости - например. если таблицы стилей отключены, макет будет ломаться больше, чем обычно. - person DisgruntledGoat; 08.07.2009