Элемент упаковочного блока со ссылкой

Question

Элемент упаковочного блока со ссылкой

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

Имея это в виду, у меня есть документ WordPress PHP, начинающийся с doctype HTML5 (<!DOCTYPE html>) и я завернул <article> с <a>и установили <a> в display: block,

Мой источник php:

<a href="<?php the_permalink(); ?>">
<article>
<header>
Some header content
</header>
<footer>
Some footer content
</footer>
</article>
</a>

Но когда я просматриваю его в нескольких современных браузерах (протестированных в Chrome, Firefox и Safari), я получаю следующее:

<a href="the-correctly-rendered-url">
</a>
<article>
<a href="the-correctly-rendered-url"></a>
<header>
<a href="the-correctly-rendered-url">
Some header content
</a>
</header>
<footer>
Some footer content
</footer>
</article>

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

Было много сообщений на эту тему, но ни одно, которое я нашел, не касалось этой конкретной проблемы.

Кто-нибудь еще испытывал это? Эти браузеры просто не придерживаются спецификаций HTML5? Что можно сделать, если отображаемая страница не соответствует заданной спецификации?

1

html html5 hyperlink php wrap

Решение

Другие решения

В этом случае некоторые другие обычаи & Функции WordPress создавали дополнительные <a> теги project_categories_terms_links() а также edit_post_link(), внутри <article> тег, который вызывал странный рендеринг.

Как только я удалил их или сделал их обычным текстом, все выглядело так, как ожидалось.

Надеюсь, это поможет любому, кто столкнется с той же проблемой.

0

ты можешь попробовать

    <article>
<a href="<?php the_url(); ?>">
<header>
Some header content
</header>
<footer>
Some footer content
</footer>
</a>
</article>

-1

Я только что проверил ваш код на этом простом примере, и он хорошо работает в моих браузерах

<?php
function the_url()
{
echo 'http://exemple.com';
}
?>

<a href="<?php the_url(); ?>">
<article>
<header>
Some header content
</header>
<footer>
Some footer content
</footer>
</article>
</a>

Выход

<a href="http://exemple.com">
<article>
<header>
Some header content
</header>
<footer>
Some footer content
</footer>
</article>
</a>

Ваша проблема где-то еще

-1

Источник

Accepted Answer

Ваша проблема связана с функцией the_permalink () который будет содержать фильтры и другие вещи.

Размещенный вами код прекрасно работает с обычной функцией, которая просто отображает строку.

Вместо того, чтобы использовать

<a href="<?php the_permalink(); ?>">

Попробуйте использовать

<a href="<?php echo get_permalink(); ?>">

0