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!

Ответы

Ответ 1

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

"Семантика", действительная разметка - это некоторые слова.

Итак, зачем вам DIVs в теге <A>. Вы можете попробовать следующее:

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

затем в CSS

.divstyle { 
    display: block; //and other styles etc
 }

Ответ 2

Проверьте свою страницу в валидаторе 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>