Перепишите этот код: интерактивные div

Почему бы не использовать <span> вместо <div> и не установить дисплей: блок на обоих элементах?

Кроме того, чтобы ответить на ваш последний вопрос: я не верю, что добавление дисплей: блок; к вашей привязке заставит его пройти проверку. Валидатор проверяет, соблюдаете ли вы (X) правила HTML, а не то, как представить страницу пользователю.

Обычно я считаю тег <a > особым случаем для этой цели. Вы должны иметь возможность применять это практически ко всему - это вроде как вся суть гипертекста (хороший пример приходит на ум <tr >). Но если вам нужно передать где-нибудь валидатор, я понимаю.

Не могли бы вы использовать обработчик javascript onclick для div и полностью исключить привязку?

Вы можете рассмотреть возможность размещения div вне a, если он предназначен только для целей отображения, если только не важно, чтобы внешняя граница была интерактивной. Либо это:

<div class = "dbl_border_links"><a href = "blah">Blah text</a></div>

или это:

<a class = "dbl_border_links" href = "blah"><span>Blah text</span></a>

будет работать, и вы можете использовать что-то вроде этого:

<style>
  .dbl_border_links, .dbl_border_links>* {
    display: block;
    border: 1px solid;
    padding: 1px;
  }
  .dbl_border_links {
    border-color: red;
  }
  .dbl_border_links > * {
    border-color: blue;
  }
</style>

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

Во-первых, нет ничего плохого в том, чтобы дать привязку display: block; Я бы сказал, что это одна из наиболее распространенных вещей, которые люди делают с CSS, и она полностью соответствует стандартам. Во-вторых, есть несколько способов создать двойную границу на элементе HTML. Во-первых, обратите внимание на свойство "outline":

http://webdesign.about.com/od/advancedcss/a/outline_style.htm

По общему признанию, это будет работать только в более современных браузерах, но должно постепенно ухудшаться, поскольку структура не занимает места на странице. Если содержимое ссылки должно быть изображением, вы можете просто дать <a> небольшой отступ и цвет фона, а также обычную границу (другого цвета), чтобы создать впечатление двойной границы. Или добавьте к изображению собственную рамку. Конечно, вы также можете сделать что-то в соответствии с вашей первоначальной идеей, но вложив свой HTML-код в обратную сторону и просто назначив разные границы каждому элементу. Или вы можете использовать встроенный элемент внутри ссылки (например, <span> или <em> или что-то в этом роде), который вы также настроили для отображения: block; (да, это тоже верно!). Удачного кодирования!

Если я правильно понимаю ваши намерения, вы должны разместить, как уже упоминалось, div за пределами привязки и, чтобы получить такое же представление, сделать привязку width:100%;height:100%. Кроссбраузерность может отличаться. Кроме того, вы можете полностью сбросить div и дать привязку display:block;

Что именно вы пытаетесь сделать?